angular-duo-pane
Version:
A library for Angular projects to easily add a two pane view for desktops, foldables and dual screen devices.
60 lines • 6.55 kB
JavaScript
import { __decorate } from "tslib";
import { AfterViewInit, ChangeDetectorRef, Component, Input, TemplateRef, ViewChild, ViewContainerRef, EmbeddedViewRef } from '@angular/core';
import { Segment } from '../../models/Segment';
let DuoPaneComponent = class DuoPaneComponent {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.embeddedViewRef = null;
this.Segment = new Segment(0, 0, 0, 0);
this.ContentTemplateRef = undefined;
}
get segment() {
return this.Segment;
}
set segment(value) {
this.Segment = value;
}
get contentTemplateRef() {
return this.ContentTemplateRef;
}
set contentTemplateRef(value) {
if (value instanceof TemplateRef) {
this.ContentTemplateRef = value;
this.renderView();
}
}
ngAfterViewInit() {
this.renderView();
}
renderView() {
if (this.ContentTemplateRef && this.viewContainerRef) {
if (this.embeddedViewRef) {
this.embeddedViewRef.destroy();
}
this.viewContainerRef.clear();
this.embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.ContentTemplateRef);
this.changeDetectorRef.detectChanges();
}
}
};
DuoPaneComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
__decorate([
ViewChild('viewContainer', { read: ViewContainerRef, static: true })
], DuoPaneComponent.prototype, "viewContainerRef", void 0);
__decorate([
Input()
], DuoPaneComponent.prototype, "segment", null);
__decorate([
Input()
], DuoPaneComponent.prototype, "contentTemplateRef", null);
DuoPaneComponent = __decorate([
Component({
selector: 'duo-pane',
template: "<div class=\"dual-screen-view-pane\" [style.left]=\"segment.left + 'px'\" [style.top]=\"segment.top + 'px'\" [style.height]=\"segment.height + 'px'\" [style.width]=\"segment.width + 'px'\">\n <ng-container #viewContainer></ng-container>\n</div>\n",
styles: [".dual-screen-view-pane{position:absolute;overflow:auto}"]
})
], DuoPaneComponent);
export { DuoPaneComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHVvLXBhbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYW5ndWxhci1kdW8tcGFuZS8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2R1by1wYW5lL2R1by1wYW5lLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsZUFBZSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTlJLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQU8vQyxJQUFhLGdCQUFnQixHQUE3QixNQUFhLGdCQUFnQjtJQXlCM0IsWUFBb0IsaUJBQW9DO1FBQXBDLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFyQmhELG9CQUFlLEdBQXlCLElBQUksQ0FBQztRQUU3QyxZQUFPLEdBQWEsSUFBSSxPQUFPLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFRNUMsdUJBQWtCLEdBQXFCLFNBQVMsQ0FBQztJQVdHLENBQUM7SUFsQjdELElBQVcsT0FBTztRQUNoQixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUNRLElBQVcsT0FBTyxDQUFDLEtBQWU7UUFDekMsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQztJQUdELElBQVcsa0JBQWtCO1FBQzNCLE9BQU8sSUFBSSxDQUFDLGtCQUFrQixDQUFDO0lBQ2pDLENBQUM7SUFDUSxJQUFXLGtCQUFrQixDQUFDLEtBQXVCO1FBQzVELElBQUksS0FBSyxZQUFZLFdBQVcsRUFBRTtZQUNoQyxJQUFJLENBQUMsa0JBQWtCLEdBQUcsS0FBSyxDQUFDO1lBQ2hDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztTQUNuQjtJQUVILENBQUM7SUFHRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFTyxVQUFVO1FBQ2hCLElBQUksSUFBSSxDQUFDLGtCQUFrQixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsRUFBRTtZQUNwRCxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7Z0JBQ3hCLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxFQUFFLENBQUM7YUFDaEM7WUFDRCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDOUIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLENBQUM7WUFDekYsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQ3hDO0lBQ0gsQ0FBQztDQUVGLENBQUE7O1lBakJ3QyxpQkFBaUI7O0FBdkJjO0lBQXJFLFNBQVMsQ0FBQyxlQUFlLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDOzBEQUFvQztBQVFoRztJQUFSLEtBQUssRUFBRTsrQ0FFUDtBQU1RO0lBQVIsS0FBSyxFQUFFOzBEQU1QO0FBeEJVLGdCQUFnQjtJQUw1QixTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsVUFBVTtRQUNwQixxUUFBd0M7O0tBRXpDLENBQUM7R0FDVyxnQkFBZ0IsQ0EwQzVCO1NBMUNZLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIElucHV0LCBUZW1wbGF0ZVJlZiwgVmlld0NoaWxkLCBWaWV3Q29udGFpbmVyUmVmLCBFbWJlZGRlZFZpZXdSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElTZWdtZW50IH0gZnJvbSAnLi4vLi4vbW9kZWxzL0lTZWdtZW50JztcbmltcG9ydCB7IFNlZ21lbnQgfSBmcm9tICcuLi8uLi9tb2RlbHMvU2VnbWVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2R1by1wYW5lJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2R1by1wYW5lLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZHVvLXBhbmUuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIER1b1BhbmVDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcblxuICBAVmlld0NoaWxkKCd2aWV3Q29udGFpbmVyJywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmLCBzdGF0aWM6IHRydWUgfSkgdmlld0NvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZjtcblxuICBwcml2YXRlIGVtYmVkZGVkVmlld1JlZjogRW1iZWRkZWRWaWV3UmVmPGFueT4gPSBudWxsO1xuXG4gIHByaXZhdGUgU2VnbWVudDogSVNlZ21lbnQgPSBuZXcgU2VnbWVudCgwLCAwLCAwLCAwKTtcbiAgcHVibGljIGdldCBzZWdtZW50KCk6IElTZWdtZW50IHtcbiAgICByZXR1cm4gdGhpcy5TZWdtZW50O1xuICB9XG4gIEBJbnB1dCgpIHB1YmxpYyBzZXQgc2VnbWVudCh2YWx1ZTogSVNlZ21lbnQpIHtcbiAgICB0aGlzLlNlZ21lbnQgPSB2YWx1ZTtcbiAgfVxuXG4gIHByaXZhdGUgQ29udGVudFRlbXBsYXRlUmVmOiBUZW1wbGF0ZVJlZjxhbnk+ID0gdW5kZWZpbmVkO1xuICBwdWJsaWMgZ2V0IGNvbnRlbnRUZW1wbGF0ZVJlZigpOiBUZW1wbGF0ZVJlZjxhbnk+IHtcbiAgICByZXR1cm4gdGhpcy5Db250ZW50VGVtcGxhdGVSZWY7XG4gIH1cbiAgQElucHV0KCkgcHVibGljIHNldCBjb250ZW50VGVtcGxhdGVSZWYodmFsdWU6IFRlbXBsYXRlUmVmPGFueT4pIHtcbiAgICBpZiAodmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZikge1xuICAgICAgdGhpcy5Db250ZW50VGVtcGxhdGVSZWYgPSB2YWx1ZTtcbiAgICAgIHRoaXMucmVuZGVyVmlldygpO1xuICAgIH1cblxuICB9XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7IH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5yZW5kZXJWaWV3KCk7XG4gIH1cblxuICBwcml2YXRlIHJlbmRlclZpZXcoKSB7XG4gICAgaWYgKHRoaXMuQ29udGVudFRlbXBsYXRlUmVmICYmIHRoaXMudmlld0NvbnRhaW5lclJlZikge1xuICAgICAgaWYgKHRoaXMuZW1iZWRkZWRWaWV3UmVmKSB7XG4gICAgICAgIHRoaXMuZW1iZWRkZWRWaWV3UmVmLmRlc3Ryb3koKTtcbiAgICAgIH1cbiAgICAgIHRoaXMudmlld0NvbnRhaW5lclJlZi5jbGVhcigpO1xuICAgICAgdGhpcy5lbWJlZGRlZFZpZXdSZWYgPSB0aGlzLnZpZXdDb250YWluZXJSZWYuY3JlYXRlRW1iZWRkZWRWaWV3KHRoaXMuQ29udGVudFRlbXBsYXRlUmVmKTtcbiAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3JSZWYuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIH1cbiAgfVxuXG59XG4iXX0=