ngx-resizable-ex/fesm5/ngx-resizable-ex.js

A Resizable Split-Pane Layout for Angular6+

import { __decorate, __metadata } from 'tslib';
import { defineInjectable, Injectable, HostBinding, Input, Output, Component, ViewEncapsulation, ElementRef, EventEmitter, HostListener, Directive, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

var NgxResizableService = /** @class */ (function () {
    function NgxResizableService() {
    }
    NgxResizableService.ngInjectableDef = defineInjectable({ factory: function NgxResizableService_Factory() { return new NgxResizableService(); }, token: NgxResizableService, providedIn: "root" });
    NgxResizableService = __decorate([
        Injectable({
            providedIn: 'root'
        }),
        __metadata("design:paramtypes", [])
    ], NgxResizableService);
    return NgxResizableService;
}());

function getWindow() {
    return window;
}
var NgxResizeableWindowRef = /** @class */ (function () {
    function NgxResizeableWindowRef() {
    }
    Object.defineProperty(NgxResizeableWindowRef.prototype, "nativeWindow", {
        get: function () {
            return getWindow();
        },
        enumerable: true,
        configurable: true
    });
    NgxResizeableWindowRef.ngInjectableDef = defineInjectable({ factory: function NgxResizeableWindowRef_Factory() { return new NgxResizeableWindowRef(); }, token: NgxResizeableWindowRef, providedIn: "root" });
    NgxResizeableWindowRef = __decorate([
        Injectable({
            providedIn: 'root'
        })
    ], NgxResizeableWindowRef);
    return NgxResizeableWindowRef;
}());

var ɵ0 = window;
var ResizableComponent = /** @class */ (function () {
    function ResizableComponent(regionElement, windowRef) {
        this.regionElement = regionElement;
        this.windowRef = windowRef;
        this.resizable = true;
        this.noTransition = false;
        this.rFlex = false;
        this.resizeStart = new EventEmitter();
        this.resizing = new EventEmitter();
        this.resizeEnd = new EventEmitter();
        this.vx = 1;
        this.vy = 1;
        this.info = {};
        this.nativeElement = this.regionElement.nativeElement;
    }
    ResizableComponent.prototype.ngOnInit = function () {
        if (!this.rFlex) {
            this.resizable = false;
        } // Added to permit use of component for all cells
        this.flexBasis = 'flexBasis' in this.nativeElement.style ? 'flexBasis' :
            'webkitFlexBasis' in this.nativeElement.style ? 'webkitFlexBasis' :
                'msFlexPreferredSize' in this.nativeElement.style ? 'msFlexPreferredSize' : 'flexBasis';
    };
    ResizableComponent.prototype.ngAfterViewInit = function () {
        this.style = this.windowRef.nativeWindow.getComputedStyle(this.nativeElement);
    };
    ResizableComponent.prototype.updateInfo = function (e) {
        this.info['width'] = false;
        this.info['height'] = false;
        if (this.axis === 'x') {
            this.info['width'] = parseInt(this.nativeElement.style[this.rFlex ? this.flexBasis : 'width'], 10);
        }
        else {
            this.info['height'] = parseInt(this.nativeElement.style[this.rFlex ? this.flexBasis : 'height'], 10);
        }
        this.info['id'] = this.nativeElement.id;
        this.info['evt'] = e;
    };
    ResizableComponent.prototype.dragStart = function (e, direction) {
        var mouseEvent = e.originalEvent;
        this.dragDir = direction;
        this.axis = (this.dragDir === 'left' || this.dragDir === 'right') ? 'x' : 'y';
        this.start = (this.axis === 'x' ? mouseEvent.clientX : mouseEvent.clientY);
        this.w = parseInt(this.style.getPropertyValue('width'), 10);
        this.h = parseInt(this.style.getPropertyValue('height'), 10);
        this.resizeStart.emit({ info: this.info });
        // prevent transition while dragging
        this.noTransition = true;
    };
    ResizableComponent.prototype.dragEnd = function (e) {
        var mouseEvent = e.originalEvent;
        this.updateInfo(mouseEvent);
        this.resizeEnd.emit({ info: this.info });
        this.noTransition = false;
    };
    ResizableComponent.prototype.dragging = function (e) {
        var mouseEvent = e.originalEvent;
        var offset = (this.axis === 'x') ? this.start - mouseEvent.clientX : this.start - mouseEvent.clientY;
        var operand = 1;
        switch (this.dragDir) {
            case 'top':
                operand = -1;
            /* falls through */
            case 'bottom':
                var height = (this.h - offset * this.vy * operand) + 'px';
                if (this.rFlex) {
                    this.flexBasis = height;
                }
                else {
                    this.height = height;
                }
                break;
            case 'left':
                operand = -1;
            /* falls through */
            case 'right':
                var width = (this.w - offset * this.vx * operand) + 'px';
                if (this.rFlex) {
                    this.flexBasis = width;
                }
                else {
                    this.width = width;
                }
                break;
        }
        this.updateInfo(mouseEvent);
        this.resizing.emit({ info: this.info });
    };
    __decorate([
        HostBinding('class.resizable'),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "resizable", void 0);
    __decorate([
        HostBinding('class.no-transition'),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "noTransition", void 0);
    __decorate([
        HostBinding('style.width'),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "width", void 0);
    __decorate([
        HostBinding('style.height'),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "height", void 0);
    __decorate([
        HostBinding('style.flex-basis'),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "flexBasis", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "directions", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "rFlex", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "resizeStart", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "resizing", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], ResizableComponent.prototype, "resizeEnd", void 0);
    ResizableComponent = __decorate([
        Component({
            selector: 'rsz-layout',
            template: "<ng-content></ng-content>\n\n<div *ngFor='let direction of directions'\n     [class]=\"'rg-' + direction\"\n     rszDragHandle\n     (DragStart)=\"dragStart($event, direction);\"\n     (DragEnd)=\"dragEnd($event)\"\n     (Drag)=\"dragging($event)\">\n    <span></span>\n</div>",
            providers: [{ provide: 'Window', useValue: ɵ0 }],
            encapsulation: ViewEncapsulation.None,
            styles: [".content{display:flex;flex-flow:column nowrap}.row{flex:1;display:flex;flex-flow:row nowrap}.row.resizable{flex:0 0 360px}.cell{box-sizing:border-box;background:#fff;border:4px solid #f0f0f0;flex:1;min-height:60px}.cell.resizable{flex:0 0 360px}.resizable{position:relative}.resizable.no-transition{transition:none!important}.rg-none{display:none}.rg-bottom,.rg-left,.rg-right,.rg-top{display:block;width:8px;height:8px;line-height:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;position:absolute;z-index:1}.rg-bottom span,.rg-left span,.rg-right span,.rg-top span{position:absolute;box-sizing:border-box;display:block;border:1px solid #ccc}.rg-left span,.rg-right span{border-width:0 1px;top:50%;margin:-10px 0 0 2px;height:20px;width:4px}.rg-bottom span,.rg-top span{border-width:1px 0;left:50%;margin:2px 0 0 -10px;width:20px;height:4px}.rg-top{cursor:row-resize;width:100%;top:0;left:0;margin-top:-4px}.rg-right{cursor:col-resize;height:100%;right:0;top:0;margin-right:-8px}.rg-bottom{cursor:row-resize;width:100%;bottom:0;left:0;margin-bottom:-4px}.rg-left{cursor:col-resize;height:100%;left:0;top:0;margin-left:-8px}.content.cols{flex-flow:row nowrap}.content.cols .row{flex-flow:column nowrap}.content.cols .cell{min-width:60px}.content.cols .rg-top{margin-top:-8px}.content.cols .rg-right{margin-right:-4px}.content.cols .rg-bottom{margin-bottom:-8px}.content.cols .rg-left{margin-left:-4px}"]
        }),
        __metadata("design:paramtypes", [ElementRef, NgxResizeableWindowRef])
    ], ResizableComponent);
    return ResizableComponent;
}());

var DragDirective = /** @class */ (function () {
    function DragDirective() {
        this.DragStart = new EventEmitter();
        this.Drag = new EventEmitter();
        this.DragEnd = new EventEmitter();
        this.dragging = false;
    }
    DragDirective.prototype.onMousedown = function (event) {
        if (event.which === 1) {
            this.dragging = true;
            this.DragStart.emit({ originalEvent: event });
        }
    };
    DragDirective.prototype.onMouseup = function (event) {
        if (this.dragging) {
            this.DragEnd.emit({ originalEvent: event });
        }
        this.dragging = false;
    };
    DragDirective.prototype.onMousemove = function (event) {
        if (this.dragging) {
            this.Drag.emit({ originalEvent: event });
        }
    };
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], DragDirective.prototype, "DragStart", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], DragDirective.prototype, "Drag", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], DragDirective.prototype, "DragEnd", void 0);
    __decorate([
        HostListener('mousedown', ['$event']),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], DragDirective.prototype, "onMousedown", null);
    __decorate([
        HostListener('document:mouseup', ['$event']),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], DragDirective.prototype, "onMouseup", null);
    __decorate([
        HostListener('document:mousemove', ['$event']),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [MouseEvent]),
        __metadata("design:returntype", void 0)
    ], DragDirective.prototype, "onMousemove", null);
    DragDirective = __decorate([
        Directive({
            selector: '[rszDragHandle]'
        })
    ], DragDirective);
    return DragDirective;
}());

var NgxResizableModule = /** @class */ (function () {
    function NgxResizableModule() {
    }
    NgxResizableModule = __decorate([
        NgModule({
            imports: [
                CommonModule
            ],
            declarations: [
                ResizableComponent,
                DragDirective
            ],
            exports: [
                ResizableComponent,
                DragDirective
            ]
        })
    ], NgxResizableModule);
    return NgxResizableModule;
}());

/*
 * Public API Surface of ngx-resizable
 */

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

export { NgxResizableModule, NgxResizableService, ResizableComponent, ɵ0, NgxResizeableWindowRef as ɵa, DragDirective as ɵb };
//# sourceMappingURL=ngx-resizable-ex.js.map