@duoduo-oba/ng-devui/bundles/ng-devui-splitter.umd.min.js

DevUI components based on Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ng-devui/splitter",["exports","@angular/core","@angular/common","@angular/forms","rxjs","rxjs/operators"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].splitter={}),e.ng.core,e.ng.common,e.ng.forms,e.rxjs,e.rxjs.operators)}(this,(function(e,t,i,r,o,n){"use strict";var s=function(){function e(e,i){this.el=e,this.renderer=i,this.resizable=!0,this.collapsible=!1,this.collapseDirection="both",this.sizeChange=new t.EventEmitter,this.collapsedChange=new t.EventEmitter,this.paneClass=!0,this._order=0,this.collapsed=!1,this.element=this.el.nativeElement}return Object.defineProperty(e.prototype,"size",{get:function(){return this._size},set:function(e){this._size=e,this.renderer.setStyle(this.element,"flex-basis",e);this.size?this.renderer.addClass(this.element,"devui-splitter-pane-fixed"):this.renderer.removeClass(this.element,"devui-splitter-pane-fixed")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"order",{get:function(){return this._order},set:function(e){this._order=e,this.setOrderStyles()},enumerable:!0,configurable:!0}),e.prototype.setOrderStyles=function(){this.renderer.setStyle(this.element,"order",this.order)},Object.defineProperty(e.prototype,"computedSize",{get:function(){return"vertical"===this.orientation?this.element.offsetHeight:this.element.offsetWidth},enumerable:!0,configurable:!0}),e.prototype.toggleCollapseClass=function(){this.collapsed?this.renderer.addClass(this.element,"devui-splitter-pane-hidden"):this.renderer.removeClass(this.element,"devui-splitter-pane-hidden")},e.prototype.toggleNearPaneFlexGrow=function(){this.element.classList.contains("devui-splitter-pane-grow")?this.renderer.removeClass(this.element,"devui-splitter-pane-grow"):this.renderer.addClass(this.element,"devui-splitter-pane-grow")},e.prototype.ngAfterViewChecked=function(){this.size||this.resizable||this.renderer.addClass(this.element,"devui-splitter-pane-fixed")},e.decorators=[{type:t.Component,args:[{selector:"d-splitter-pane",template:"<ng-content></ng-content>\r\n",changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host.devui-splitter-pane{position:relative;-webkit-box-flex:1;flex:1 1 auto;display:block;min-width:0;max-width:100%;min-height:0;max-height:100%;height:100%}:host.devui-splitter-pane-fixed{-webkit-box-flex:0;flex-grow:0;flex-shrink:0}:host.devui-splitter-pane-hidden{-webkit-box-flex:0!important;flex:0!important;overflow:hidden!important}:host.devui-splitter-pane-grow{-webkit-box-flex:1!important;flex-grow:1!important}"]}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},e.propDecorators={minSize:[{type:t.Input}],maxSize:[{type:t.Input}],resizable:[{type:t.Input}],collapsible:[{type:t.Input}],collapseDirection:[{type:t.Input}],size:[{type:t.Input}],sizeChange:[{type:t.Output}],collapsedChange:[{type:t.Output}],paneClass:[{type:t.HostBinding,args:["class.devui-splitter-pane"]}]},e}();var a=function(){function e(){this.paneCount=0}return e.prototype.configPane=function(e){var t=e.panes,i=e.orientation,r=e.containerSize;this.panes=t,this.panes.forEach((function(e,t){e.order=2*t,e.orientation=i})),this.paneCount=this.panes.length,this.containerSize=r},e.prototype.dragState=function(e){var t=this.getPane(e),i=this.getPane(e+1),r=t.computedSize+i.computedSize;return{prev:{index:e,initialSize:t.computedSize,minSize:this.toPixels(t.minSize)||r-this.toPixels(i.maxSize)||0,maxSize:this.toPixels(t.maxSize)||r-this.toPixels(i.minSize)||r},next:{index:e+1,initialSize:i.computedSize,minSize:this.toPixels(i.minSize)||r-this.toPixels(t.maxSize)||0,maxSize:this.toPixels(i.maxSize)||r-this.toPixels(t.minSize)||r}}},e.prototype.setSize=function(e,t){var i=this.getPane(e.prev.index),r=this.getPane(e.next.index);i.size&&r.size?(this.resize(e.prev,t),this.resize(e.next,-t)):r.size?this.resize(e.next,-t):this.resize(e.prev,t)},e.prototype.clamp=function(e,t,i){return Math.min(t,Math.max(e,i))},e.prototype.resize=function(e,t){var i=this.getPane(e.index),r=this.containerSize(),o=this.clamp(e.minSize,e.maxSize,e.initialSize+t),n="";n=this.isPercent(i.size)?100*o/r+"%":o+"px",i.size=n,i.sizeChange.emit(n)},e.prototype.isResizable=function(e){var t=this.getPane(e),i=this.getPane(e+1),r=t.collapsed||i.collapsed;return t.resizable&&i.resizable&&!r},e.prototype.isStaticBar=function(e){var t=this.getPane(e),i=this.getPane(e+1);return!(t.resizable&&i.resizable)},e.prototype.getPane=function(e){if(!this.panes||e<0||e>=this.panes.length)throw new Error("no pane can return.");return this.panes[e]},e.prototype.isPercent=function(e){return/%$/.test(e)},e.prototype.toPixels=function(e){var t=parseFloat(e);return this.isPercent(e)&&(t=this.containerSize()*t/100),t},e.prototype.togglePane=function(e,t){var i=this.getPane(e),r=this.getPane(t);i.collapsible&&(i.collapsed=!i.collapsed,i.toggleCollapseClass(),r.toggleNearPaneFlexGrow(),i.collapsedChange.emit(i.collapsed))},e.decorators=[{type:t.Injectable}],e}();var l=function(){function e(e,t){this.el=e,this.splitter=t,this.orientation="horizontal",this.splitBarSize="2px",this.disabledBarSize="1px"}return Object.defineProperty(e.prototype,"class",{get:function(){return"devui-splitter devui-splitter-"+this.orientation},enumerable:!0,configurable:!0}),e.prototype.ngOnChanges=function(e){e.orientation&&!e.orientation.isFirstChange()&&this.reconfigure()},e.prototype.ngAfterContentInit=function(){var e=this;this.reconfigure(),this.paneChangesSubscription=this.panes.changes.subscribe((function(t){e.reconfigure()}))},e.prototype.ngOnDestroy=function(){this.paneChangesSubscription&&this.paneChangesSubscription.unsubscribe()},e.prototype.reconfigure=function(){var e=this;this.splitter.configPane({panes:this.panes.toArray(),orientation:this.orientation,containerSize:function(){return"vertical"===e.orientation?e.el.nativeElement.clientHeight:e.el.nativeElement.clientWidth}})},e.decorators=[{type:t.Component,args:[{selector:"d-splitter",exportAs:"dSplitter",template:'<ng-content select="d-splitter-pane"></ng-content>\r\n<ng-container *ngFor="let pane of panes; let index = index; let last = last">\r\n  <d-splitter-bar\r\n    dResize\r\n    [style.order]="index * 2 + 1"\r\n    *ngIf="!last"\r\n    [index]="index"\r\n    [splitBarSize]="splitBarSize"\r\n    [disabledBarSize]="disabledBarSize"\r\n    [orientation]="orientation"\r\n  >\r\n  </d-splitter-bar>\r\n</ng-container>\r\n',changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[a],styles:[":host{display:-webkit-box;display:flex;width:100%;height:auto;position:relative}:host.devui-splitter-horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host.devui-splitter-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}"]}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:a}]},e.propDecorators={orientation:[{type:t.Input}],splitBarSize:[{type:t.Input}],disabledBarSize:[{type:t.Input}],class:[{type:t.HostBinding,args:["class"]}],panes:[{type:t.ContentChildren,args:[s]}]},e}();var p=function(){function e(e,i){var r=this;this.el=e,this.ngZone=i,this.enableResize=!0,this.pressEvent=new t.EventEmitter,this.dragEvent=new t.EventEmitter,this.releaseEvent=new t.EventEmitter,this.bind=function(e,t,i){return e.addEventListener&&e.addEventListener(t,i)},this.unbind=function(e,t,i){return e&&e.removeEventListener&&e.removeEventListener(t,i)},this.mousedown=function(e){r.bind(document,"mousemove",r.mousemove),r.bind(document,"mouseup",r.mouseup),r.pressEvent.emit(r.normalizeEvent(e))},this.mousemove=function(e){r.dragEvent.emit(r.normalizeEvent(e))},this.mouseup=function(e){r.unbind(document,"mousemove",r.mousemove),r.unbind(document,"mouseup",r.mouseup),r.releaseEvent.emit(r.normalizeEvent(e))},this.touchstart=function(e){r.bind(document,"touchmove",r.touchmove),r.bind(document,"touchend",r.touchend),1===e.touches.length&&r.pressEvent.emit(r.normalizeEvent(e))},this.touchmove=function(e){1===e.touches.length&&r.dragEvent.emit(r.normalizeEvent(e))},this.touchend=function(e){r.bind(document,"touchmove",r.touchmove),r.bind(document,"touchend",r.touchend),0===e.touches.length&&r.releaseEvent.emit(r.normalizeEvent(e))}}return e.prototype.ngOnInit=function(){var e=this;this.enableResize&&this.ngZone.runOutsideAngular((function(){e.bindEvent()}))},e.prototype.ngOnDestroy=function(){this.enableResize&&(this.unbind(this.el.nativeElement,"mousedown",this.mousedown),this.unbind(this.el.nativeElement,"touchstart",this.touchstart))},e.prototype.bindEvent=function(){var e=this.el.nativeElement;this.bind(e,"mousedown",this.mousedown),this.bind(e,"touchstart",this.touchstart)},e.prototype.normalizeEvent=function(e){return e.type.match(/touch/)?{pageX:e.changedTouches[0].pageX,pageY:e.changedTouches[0].pageY,clientX:e.changedTouches[0].clientX,clientY:e.changedTouches[0].clientY,type:e.type,originalEvent:e,isTouch:!0}:{pageX:e.pageX,pageY:e.pageY,clientX:e.clientX,clientY:e.clientY,offsetX:e.offsetX,offsetY:e.offsetY,type:e.type,originalEvent:e}},e.decorators=[{type:t.Directive,args:[{selector:"[dResize]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.NgZone}]},e.propDecorators={enableResize:[{type:t.Input}],pressEvent:[{type:t.Output}],dragEvent:[{type:t.Output}],releaseEvent:[{type:t.Output}]},e}();var d=function(){function e(e,t,i,r){this.el=e,this.splitter=t,this.renderer=i,this.resize=r,this.subscriptions=new o.Subscription,this.stopPropagation=function(e){var t=e.originalEvent;t.stopPropagation(),t.cancelable&&t.preventDefault()},this.moveStream=function(e){return function(t){return e.dragEvent.pipe(n.takeUntil(e.releaseEvent),n.map((function(e){var i=e.pageX,r=e.pageY;return{originalX:t.pageX,originalY:t.pageY,pageX:i,pageY:r}})))}}}return Object.defineProperty(e.prototype,"splitBarSize",{get:function(){return this._splitBarSize},set:function(e){this._splitBarSize=e,this.renderer.setStyle(this.el.nativeElement,"flex-basis",e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"class",{get:function(){var e="devui-splitter-bar devui-splitter-bar-"+this.orientation;return this.splitter.isStaticBar(this.index)?this.renderer.setStyle(this.el.nativeElement,"flex-basis",this.disabledBarSize):e+=" resizable",e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e,t=this,i=this.resize.pressEvent.pipe(n.tap(this.stopPropagation),n.filter((function(){return t.splitter.isResizable(t.index)})),n.tap((function(){return e=t.splitter.dragState(t.index)})),n.switchMap(this.moveStream(this.resize))).subscribe((function(i){var r,o=i.pageX,n=i.pageY,s=i.originalX,a=i.originalY;r="vertical"===t.orientation?n-a:o-s,t.splitter.setSize(e,r)}));this.subscriptions.add(i)},e.prototype.collapsePrePane=function(){var e=this.index+1;this.splitter.togglePane(this.index,e),this.toggleResize(this.index)},e.prototype.collapseNextPane=function(){this.splitter.togglePane(this.index+1,this.index),this.toggleResize(this.index+1)},e.prototype.toggleResize=function(e){this.splitter.getPane(e).collapsed?this.renderer.addClass(this.el.nativeElement,"none-resizable"):this.renderer.removeClass(this.el.nativeElement,"none-resizable")},Object.defineProperty(e.prototype,"prevClass",{get:function(){var e=this.splitter.getPane(this.index),t=this.splitter.getPane(this.index+1),i="after"!==e.collapseDirection||0===this.index;return this.generateCollapseClass(e,t,i)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"nextClass",{get:function(){var e=this.splitter.getPane(this.index+1),t=this.splitter.getPane(this.index),i="before"!==e.collapseDirection||this.index+1===this.splitter.paneCount-1;return this.generateCollapseClass(e,t,i)},enumerable:!0,configurable:!0}),e.prototype.generateClass=function(e){return Object.keys(e).filter((function(t){return e[t]})).join(" ")},e.prototype.generateCollapseClass=function(e,t,i){var r=e.collapsible&&i,o=e.collapsed,n=(this.splitter.isStaticBar(this.index),t.collapsed);return this.generateClass({"devui-collapse":r,collapsed:o,hidden:n})},e.prototype.ngOnDestroy=function(){this.subscriptions.unsubscribe()},e.decorators=[{type:t.Component,args:[{selector:"d-splitter-bar",template:'<div class="prev" [ngClass]="prevClass" (click)="collapsePrePane()" (touchstart)="collapsePrePane()"></div>\r\n<div class="devui-resize-handle"></div>\r\n<div class="next" [ngClass]="nextClass" (click)="collapseNextPane()" (touchstart)="collapseNextPane()"></div>\r\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host.devui-splitter-bar{background-color:#dfe1e6;display:-webkit-box;display:flex;position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-flex:0;flex-grow:0;flex-shrink:0}:host.devui-splitter-bar .devui-collapse{background-color:#dfe1e6;position:absolute;z-index:15;cursor:pointer}:host.devui-splitter-bar .devui-collapse::after,:host.devui-splitter-bar .devui-collapse::before{content:'';width:10px;height:2px;background:#fff;display:block;position:absolute}:host.devui-splitter-bar .devui-collapse:hover{background-color:#344899}:host.devui-splitter-bar-horizontal .devui-collapse{width:12px;height:30px}:host.devui-splitter-bar-horizontal .devui-collapse.next.hidden,:host.devui-splitter-bar-horizontal .devui-collapse.prev.hidden{display:none}:host.devui-splitter-bar-horizontal .devui-collapse.prev{border-radius:0 4px 4px 0;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::before,:host.devui-splitter-bar-horizontal .devui-collapse.prev::before{top:9px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev::before{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::before{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::after,:host.devui-splitter-bar-horizontal .devui-collapse.prev::after{top:18px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev::after{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::after{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next{border-radius:4px 0 0 4px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::before,:host.devui-splitter-bar-horizontal .devui-collapse.next::before{top:9px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next::before{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::before{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::after,:host.devui-splitter-bar-horizontal .devui-collapse.next::after{top:18px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next::after{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::after{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-vertical .devui-collapse{height:12px;width:30px}:host.devui-splitter-bar-vertical .devui-collapse.next.hidden,:host.devui-splitter-bar-vertical .devui-collapse.prev.hidden{display:none}:host.devui-splitter-bar-vertical .devui-collapse.prev{border-radius:0 0 4px 4px;top:1px}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::before,:host.devui-splitter-bar-vertical .devui-collapse.prev::before{bottom:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.prev::before{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::before{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::after,:host.devui-splitter-bar-vertical .devui-collapse.prev::after{bottom:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.prev::after{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::after{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next{border-radius:4px 4px 0 0;bottom:1px}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::before,:host.devui-splitter-bar-vertical .devui-collapse.next::before{top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next::before{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::before{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::after,:host.devui-splitter-bar-vertical .devui-collapse.next::after{top:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.next::after{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::after{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):active,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):hover,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):active,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):hover{background-color:#344899}:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable)::after,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable)::after{content:'';display:block;position:absolute;z-index:10}:host.devui-splitter-bar-horizontal.resizable{cursor:col-resize}:host.devui-splitter-bar-horizontal.resizable::after{cursor:col-resize;height:100%;width:10px;top:0}:host.devui-splitter-bar-vertical.resizable{cursor:row-resize}:host.devui-splitter-bar-vertical.resizable::after{cursor:row-resize;width:100%;height:10px;left:0}"]}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:a},{type:t.Renderer2},{type:p,decorators:[{type:t.Host}]}]},e.propDecorators={index:[{type:t.Input}],orientation:[{type:t.Input}],splitBarSize:[{type:t.Input}],disabledBarSize:[{type:t.Input}],class:[{type:t.HostBinding,args:["class"]}]},e}();var u=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,r.FormsModule],exports:[l,s,d,p],declarations:[l,s,d,p],providers:[]}]}],e}();e.ResizeDirective=p,e.SplitterBarComponent=d,e.SplitterComponent=l,e.SplitterModule=u,e.SplitterPaneComponent=s,e.SplitterService=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-splitter.umd.min.js.map