UNPKG

ngx-resizable-ex

Version:

A Resizable Split-Pane Layout for Angular6+

2 lines 7.47 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-resizable-ex",["exports","@angular/core","@angular/common"],e):e((t=t||self)["ngx-resizable-ex"]={},t.ng.core,t.ng.common)}(this,function(t,e,i){"use strict";function n(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(s=(r<3?o(s):r>3?o(e,i,s):o(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s}function o(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}var r=function(){function t(){}return t.ngInjectableDef=e.defineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=n([e.Injectable({providedIn:"root"}),o("design:paramtypes",[])],t)}();var s=function(){function t(){}return Object.defineProperty(t.prototype,"nativeWindow",{get:function(){return window},enumerable:!0,configurable:!0}),t.ngInjectableDef=e.defineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=n([e.Injectable({providedIn:"root"})],t)}(),a=window,p=function(){function t(t,i){this.regionElement=t,this.windowRef=i,this.resizable=!0,this.noTransition=!1,this.rFlex=!1,this.resizeStart=new e.EventEmitter,this.resizing=new e.EventEmitter,this.resizeEnd=new e.EventEmitter,this.vx=1,this.vy=1,this.info={},this.nativeElement=this.regionElement.nativeElement}return t.prototype.ngOnInit=function(){this.rFlex||(this.resizable=!1),this.flexBasis="flexBasis"in this.nativeElement.style?"flexBasis":"webkitFlexBasis"in this.nativeElement.style?"webkitFlexBasis":"msFlexPreferredSize"in this.nativeElement.style?"msFlexPreferredSize":"flexBasis"},t.prototype.ngAfterViewInit=function(){this.style=this.windowRef.nativeWindow.getComputedStyle(this.nativeElement)},t.prototype.updateInfo=function(t){this.info.width=!1,this.info.height=!1,"x"===this.axis?this.info.width=parseInt(this.nativeElement.style[this.rFlex?this.flexBasis:"width"],10):this.info.height=parseInt(this.nativeElement.style[this.rFlex?this.flexBasis:"height"],10),this.info.id=this.nativeElement.id,this.info.evt=t},t.prototype.dragStart=function(t,e){var i=t.originalEvent;this.dragDir=e,this.axis="left"===this.dragDir||"right"===this.dragDir?"x":"y",this.start="x"===this.axis?i.clientX:i.clientY,this.w=parseInt(this.style.getPropertyValue("width"),10),this.h=parseInt(this.style.getPropertyValue("height"),10),this.resizeStart.emit({info:this.info}),this.noTransition=!0},t.prototype.dragEnd=function(t){var e=t.originalEvent;this.updateInfo(e),this.resizeEnd.emit({info:this.info}),this.noTransition=!1},t.prototype.dragging=function(t){var e=t.originalEvent,i="x"===this.axis?this.start-e.clientX:this.start-e.clientY,n=1;switch(this.dragDir){case"top":n=-1;case"bottom":var o=this.h-i*this.vy*n+"px";this.rFlex?this.flexBasis=o:this.height=o;break;case"left":n=-1;case"right":var r=this.w-i*this.vx*n+"px";this.rFlex?this.flexBasis=r:this.width=r}this.updateInfo(e),this.resizing.emit({info:this.info})},n([e.HostBinding("class.resizable"),o("design:type",Object)],t.prototype,"resizable",void 0),n([e.HostBinding("class.no-transition"),o("design:type",Object)],t.prototype,"noTransition",void 0),n([e.HostBinding("style.width"),o("design:type",Object)],t.prototype,"width",void 0),n([e.HostBinding("style.height"),o("design:type",Object)],t.prototype,"height",void 0),n([e.HostBinding("style.flex-basis"),o("design:type",Object)],t.prototype,"flexBasis",void 0),n([e.Input(),o("design:type",Object)],t.prototype,"directions",void 0),n([e.Input(),o("design:type",Object)],t.prototype,"rFlex",void 0),n([e.Output(),o("design:type",Object)],t.prototype,"resizeStart",void 0),n([e.Output(),o("design:type",Object)],t.prototype,"resizing",void 0),n([e.Output(),o("design:type",Object)],t.prototype,"resizeEnd",void 0),t=n([e.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:a}],encapsulation:e.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}"]}),o("design:paramtypes",[e.ElementRef,s])],t)}(),l=function(){function t(){this.DragStart=new e.EventEmitter,this.Drag=new e.EventEmitter,this.DragEnd=new e.EventEmitter,this.dragging=!1}return t.prototype.onMousedown=function(t){1===t.which&&(this.dragging=!0,this.DragStart.emit({originalEvent:t}))},t.prototype.onMouseup=function(t){this.dragging&&this.DragEnd.emit({originalEvent:t}),this.dragging=!1},t.prototype.onMousemove=function(t){this.dragging&&this.Drag.emit({originalEvent:t})},n([e.Output(),o("design:type",Object)],t.prototype,"DragStart",void 0),n([e.Output(),o("design:type",Object)],t.prototype,"Drag",void 0),n([e.Output(),o("design:type",Object)],t.prototype,"DragEnd",void 0),n([e.HostListener("mousedown",["$event"]),o("design:type",Function),o("design:paramtypes",[Object]),o("design:returntype",void 0)],t.prototype,"onMousedown",null),n([e.HostListener("document:mouseup",["$event"]),o("design:type",Function),o("design:paramtypes",[Object]),o("design:returntype",void 0)],t.prototype,"onMouseup",null),n([e.HostListener("document:mousemove",["$event"]),o("design:type",Function),o("design:paramtypes",[MouseEvent]),o("design:returntype",void 0)],t.prototype,"onMousemove",null),t=n([e.Directive({selector:"[rszDragHandle]"})],t)}(),g=function(){function t(){}return t=n([e.NgModule({imports:[i.CommonModule],declarations:[p,l],exports:[p,l]})],t)}();t.NgxResizableModule=g,t.NgxResizableService=r,t.ResizableComponent=p,t.ɵ0=a,t.ɵa=s,t.ɵb=l,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-resizable-ex.umd.min.js.map