ngx-split-view
Version:
A resizable flex-box split layout component for Angular
2 lines • 5.81 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("split.js")):"function"==typeof define&&define.amd?define("ngx-split-view",["exports","@angular/core","rxjs","rxjs/operators","split.js"],e):e((t=t||self)["ngx-split-view"]={},t.ng.core,t.rxjs,t.rxjs.operators,t.Split)}(this,(function(t,e,i,n,r){"use strict";r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r;function o(t,e,i,n){var r,o=arguments.length,s=o<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 p=t.length-1;p>=0;p--)(r=t[p])&&(s=(o<3?r(s):o>3?r(e,i,s):r(e,i))||s);return o>3&&s&&Object.defineProperty(e,i,s),s}var s=function(){function t(t){this.viewContainerRef=t,this.splitRatio=1,this.minSize=100,this.sizeChanges=new i.Subject,this.minSizeChanges=new i.Subject}return t.prototype.ngOnChanges=function(t){t.splitRatio&&this.sizeChanges.next(),t.minSize&&this.minSizeChanges.next()},t.ctorParameters=function(){return[{type:e.ViewContainerRef}]},o([e.Input()],t.prototype,"splitRatio",void 0),o([e.Input()],t.prototype,"minSize",void 0),t=o([e.Directive({selector:"[splitPane]"})],t)}(),p=function(){function t(t){this.template=t}return t.ctorParameters=function(){return[{type:e.TemplateRef}]},t=o([e.Directive({selector:"[gutterTemplate]"})],t)}(),a=function(){function t(t){this.viewContainerRef=t,this.dragging=new e.EventEmitter,this.dragStart=new e.EventEmitter,this.dragEnd=new e.EventEmitter,this.expandToMin=!1,this.gutterSize=10,this.gutterAlign="center",this.snapOffset=30,this.dragInterval=1,this.direction="horizontal",this.subscriptions=new i.Subscription}return Object.defineProperty(t.prototype,"isHorizontal",{get:function(){return"horizontal"===this.direction},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isVertical",{get:function(){return"vertical"===this.direction},enumerable:!0,configurable:!0}),t.prototype.ngOnChanges=function(t){(t.direction||t.gutterSize||t.gutterAlign||t.snapOffset||t.dragInterval||t.expandToMin)&&this.refresh()},t.prototype.ngAfterContentInit=function(){var t=this,e=this.splitPanes.changes.pipe(n.startWith(this.splitPanes)),i=e.subscribe((function(){return t.refresh()})),r=e.pipe(n.switchMap((function(){return t.splitPanes.map((function(t){return t.sizeChanges}))})),n.mergeAll()).subscribe((function(){var e;return null===(e=t.split)||void 0===e?void 0:e.setSizes(t.getSizes())})),o=this.dragEnd.pipe(n.map((function(t){return t.sizes}))).subscribe((function(e){for(var i=t.splitPanes.toArray(),n=0;n<i.length;n++)i[n].splitRatio=e[n]}));this.subscriptions.add(i),this.subscriptions.add(r),this.subscriptions.add(o)},t.prototype.ngOnDestroy=function(){this.subscriptions.unsubscribe(),this.destroySplit()},t.prototype.refresh=function(){var t=this;if(this.destroySplit(),this.splitPanes&&0!==this.splitPanes.length){var e=new Array,i=new Array;this.splitPanes.forEach((function(t){e.push(t.viewContainerRef.element.nativeElement),i.push(t.minSize)}));var n={sizes:this.getSizes(),minSize:i,expandToMin:this.expandToMin,gutterSize:this.gutterSize,gutterAlign:this.gutterAlign,snapOffset:this.snapOffset,dragInterval:this.dragInterval,direction:this.direction,elementStyle:function(t,e,i){return{flexBasis:"calc("+e+"% - "+i+"px)"}},gutterStyle:function(t,e){return{flexBasis:e+"px"}},onDrag:function(e){t.dragging.observers.length>0&&t.dragging.emit({source:t,sizes:e})},onDragStart:function(e){return t.dragStart.emit({source:t,sizes:e})},onDragEnd:function(e){return t.dragEnd.emit({source:t,sizes:e})}};this.gutterDef&&(n.gutter=function(e,i){var n=t.viewContainerRef.createEmbeddedView(t.gutterDef.template).rootNodes.filter((function(t){return t instanceof HTMLElement}));if(1!==n.length)throw new Error("Gutter template must contain exactly one element");return n[0]}),this.split=r(e,n)}},t.prototype.destroySplit=function(){this.split&&(this.viewContainerRef.clear(),this.split.destroy(!1,!!this.gutterDef),this.split=void 0)},t.prototype.getSizes=function(){var t=new Array,e=new Array,i=0;return this.splitPanes.forEach((function(n){t.push(n.viewContainerRef.element.nativeElement);var r=n.splitRatio>=0?n.splitRatio:0;e.push(r),i+=r})),e.map((function(t){return t/i*100}))},t.ctorParameters=function(){return[{type:e.ViewContainerRef}]},o([e.Output()],t.prototype,"dragging",void 0),o([e.Output()],t.prototype,"dragStart",void 0),o([e.Output()],t.prototype,"dragEnd",void 0),o([e.Input()],t.prototype,"expandToMin",void 0),o([e.Input()],t.prototype,"gutterSize",void 0),o([e.Input()],t.prototype,"gutterAlign",void 0),o([e.Input()],t.prototype,"snapOffset",void 0),o([e.Input()],t.prototype,"dragInterval",void 0),o([e.Input()],t.prototype,"direction",void 0),o([e.ContentChildren(s)],t.prototype,"splitPanes",void 0),o([e.ContentChild(p,{static:!0})],t.prototype,"gutterDef",void 0),o([e.HostBinding("class.split-view-horizontal")],t.prototype,"isHorizontal",null),o([e.HostBinding("class.split-view-vertical")],t.prototype,"isVertical",null),t=o([e.Component({selector:"split-view",template:'<ng-content select="[splitPane]"></ng-content>',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[":host{display:flex}:host.split-view-horizontal{flex-direction:row}:host.split-view-vertical{flex-direction:column}::ng-deep .gutter.gutter-horizontal{cursor:col-resize}::ng-deep .gutter.gutter-vertical{cursor:row-resize}"]})],t)}(),u=function(){function t(){}return t=o([e.NgModule({declarations:[s,p,a],exports:[s,p,a]})],t)}();t.SplitPaneDirective=s,t.SplitViewComponent=a,t.SplitViewGutterDirective=p,t.SplitViewModule=u,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-split-view.umd.min.js.map