ngx-nestable/bundles/ngx-nestable.umd.min.js

Nestable list with drag and drop for Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-nestable",["exports","@angular/core","@angular/common"],t):t((e=e||self)["ngx-nestable"]={},e.ng.core,e.ng.common)}(this,function(e,t,i){"use strict";var n=function(){return(n=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var s in t=arguments[i])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)};function s(e){var t="function"==typeof Symbol&&e[Symbol.iterator],i=0;return t?t.call(e):{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}}}var o=function(e,t,i){void 0===i&&(i=null);for(var n=0;n<e.length;n++){var s=e[n];if(void 0!==s){if(t(s,i))break;s.children&&o(s.children,t,s)}}},l=function(e,t){t.parentNode.insertBefore(e,t.nextSibling)},r=function(e,t){void 0===t&&(t=document.body);for(var i=[],n=e.parentNode;n!==t;){var s=n;if(!n)break;n.tagName===t.tagName&&i.push(s),n=s.parentNode}return i.push(t),i},a=function(e,t){var i,n;for(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"].some(function(e){return"function"==typeof document.body[e]&&(i=e,!0)});e&&null!==(n=e.parentElement);){var s=n[i](t);if(n&&s)return n;e=n}return null},h=function(e){var t={top:0,left:0};return void 0!==typeof e.getBoundingClientRect&&(t=e.getBoundingClientRect()),{top:t.top+(window.pageYOffset||e.scrollTop)-(e.clientTop||0),left:t.left+(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0)}},d={listNodeName:"ul",itemNodeName:"li",rootClass:"dd",listClass:"dd-list",itemClass:"dd-item",dragClass:"dd-dragel",handleClass:"dd-handle",collapsedClass:"dd-collapsed",placeClass:"dd-placeholder",group:0,maxDepth:5,threshold:20,fixedDepth:!1,exportCollapsed:!0,disableDrag:!1},p={moving:0,offsetX:0,offsetY:0,startX:0,startY:0,lastX:0,lastY:0,nowX:0,nowY:0,distX:0,distY:0,dirAx:0,dirX:0,dirY:0,lastDirX:0,lastDirY:0,distAxX:0,distAxY:0},c="px",u=function(){var e=document.createElement("div"),t=document.documentElement;if(!("pointerEvents"in e.style))return!1;e.style.pointerEvents="auto",e.style.pointerEvents="x",t.appendChild(e);var i=window.getComputedStyle&&"auto"===window.getComputedStyle(e,"").pointerEvents;return t.removeChild(e),!!i}(),m=function(){function e(e,i,n,s){this.ref=e,this.renderer=i,this.el=n,this.zone=s,this.listChange=new t.EventEmitter,this.drop=new t.EventEmitter,this.drag=new t.EventEmitter,this.disclosure=new t.EventEmitter,this.options=d,this.disableDrag=!1,this.dragRootEl=null,this.dragEl=null,this.dragModel=null,this.moving=!1,this.dragDepth=0,this.relativeDepth=0,this.hasNewRoot=!1,this.pointEl=null,this.items=[],this._componentActive=!1,this._mouse=Object.assign({},p),this._list=[],this._itemId=0,this._registerHandleDirective=!1}return Object.defineProperty(e.prototype,"list",{get:function(){return this._list},set:function(e){this._list=e,this._generateItemIds()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e,t;this._componentActive=!0;var i=Object.keys(d);try{for(var n=s(i),o=n.next();!o.done;o=n.next()){var l=o.value;void 0===this.options[l]&&(this.options[l]=d[l])}}catch(t){e={error:t}}finally{try{o&&!o.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}this._generateItemIds(),this._generateItemExpanded(),this._createHandleListener()},e.prototype.ngOnDestroy=function(){},e.prototype._generateItemIds=function(){var e=this;o(this._list,function(t){t.$$id=e._itemId++})},e.prototype._generateItemExpanded=function(){o(this._list,function(e){void 0===e.expanded?e.$$expanded=!0:e.$$expanded=e.expanded})},e.prototype._createHandleListener=function(){var e=this;this.renderer.listen(this.el.nativeElement,"NESTABLE_DRAG_HANDLE_REGISTER",function(){e._registerHandleDirective=!0}),this.renderer.listen(this.el.nativeElement,"NESTABLE_DRAG_HANDLE_START",function(t){e.dragStart(t.detail.event,t.detail.param.item,t.detail.param.parentList)}),this.renderer.listen(this.el.nativeElement,"NESTABLE_EXPAND_COLLAPSE_EVENT",function(t){e.disclosure.emit({item:t.detail.item,expanded:t.detail.item.$$expanded})})},e.prototype._createDragClone=function(e,t){this._mouseStart(e,t),this._registerHandleDirective||(this._mouse.offsetY=t.nextElementSibling?t.nextElementSibling.clientHeight/2:t.clientHeight/2),this.dragEl=document.createElement(this.options.listNodeName),document.body.appendChild(this.dragEl),this.renderer.addClass(this.dragEl,this.options.dragClass),this.renderer.setStyle(this.dragEl,"left",e.pageX-this._mouse.offsetX+c),this.renderer.setStyle(this.dragEl,"top",e.pageY-this._mouse.offsetY+c),this.renderer.setStyle(this.dragEl,"position","absolute"),this.renderer.setStyle(this.dragEl,"z-index",9999),this.renderer.setStyle(this.dragEl,"pointer-events","none")},e.prototype._createPlaceholder=function(e,t){this._placeholder=document.createElement("div"),this._placeholder.classList.add(this.options.placeClass),l(this._placeholder,t),t.parentNode.removeChild(t),this.dragEl.appendChild(t),this.dragRootEl=t},e.prototype._calculateDepth=function(){for(var e,t=this.dragEl.querySelectorAll(this.options.itemNodeName),i=0;i<t.length;i++)(e=r(t[i],this.dragEl).length)>this.dragDepth&&(this.dragDepth=e);this.relativeDepth=r(this._placeholder,this.el.nativeElement.querySelector(this.options.listNodeName)).length},e.prototype._mouseStart=function(e,t){this._mouse.offsetX=e.pageX-h(t).left,this._mouse.offsetY=e.pageY-h(t).top,this._mouse.startX=this._mouse.lastX=e.pageX,this._mouse.startY=this._mouse.lastY=e.pageY},e.prototype._mouseUpdate=function(e){this._mouse.lastX=this._mouse.nowX,this._mouse.lastY=this._mouse.nowY,this._mouse.nowX=e.pageX,this._mouse.nowY=e.pageY,this._mouse.distX=this._mouse.nowX-this._mouse.lastX,this._mouse.distY=this._mouse.nowY-this._mouse.lastY,this._mouse.lastDirX=this._mouse.dirX,this._mouse.lastDirY=this._mouse.dirY,this._mouse.dirX=0===this._mouse.distX?0:this._mouse.distX>0?1:-1,this._mouse.dirY=0===this._mouse.distY?0:this._mouse.distY>0?1:-1},e.prototype._showMasks=function(){for(var e=this.el.nativeElement.getElementsByClassName("nestable-item-mask"),t=0;t<e.length;t++)e[t].style.display="block"},e.prototype._hideMasks=function(){for(var e=this.el.nativeElement.getElementsByClassName("nestable-item-mask"),t=0;t<e.length;t++)e[t].style.display="none"},e.prototype._calcMouseDistance=function(e){e.distAxX+=Math.abs(e.distX),0!==e.dirX&&e.dirX!==e.lastDirX&&(e.distAxX=0),e.distAxY+=Math.abs(e.distY),0!==e.dirY&&e.dirY!==e.lastDirY&&(e.distAxY=0)},e.prototype._move=function(e){var t;this.dragEl.getBoundingClientRect();this.renderer.setStyle(this.dragEl,"left",e.pageX-this._mouse.offsetX+c),this.renderer.setStyle(this.dragEl,"top",e.pageY-this._mouse.offsetY+c),this._mouseUpdate(e);var i=Math.abs(this._mouse.distX)>Math.abs(this._mouse.distY)?1:0;if(!this._mouse.moving)return this._mouse.dirAx=i,void(this._mouse.moving=1);this._mouse.dirAx!==i?(this._mouse.distAxX=0,this._mouse.distAxY=0):this._calcMouseDistance(this._mouse),this._mouse.dirAx=i,u||(this.dragEl.style.visibility="hidden");var n=document.elementFromPoint(e.pageX-document.body.scrollLeft,e.pageY-(window.pageYOffset||document.documentElement.scrollTop));if(u||(this.dragEl.style.visibility="visible"),n&&(n.classList.contains("nestable-item-mask")||n.classList.contains(this.options.placeClass))){if(this.pointEl=n.parentElement.parentElement,!this.options.fixedDepth&&this._mouse.dirAx&&this._mouse.distAxX>=this.options.threshold){this._mouse.distAxX=0;var s=this._placeholder.previousElementSibling;if(this._mouse.distX>0&&s&&(t=(t=s.querySelectorAll(this.options.listNodeName))[t.length-1],r(this._placeholder,this.el.nativeElement.querySelector(this.options.listNodeName)).length+this.dragDepth<=this.options.maxDepth&&(t?(t=s.querySelector(":scope > "+this.options.listNodeName)).appendChild(this._placeholder):((t=document.createElement(this.options.listNodeName)).style.paddingLeft=this.options.threshold+c,t.appendChild(this._placeholder),s.appendChild(t)))),this._mouse.distX<0){var o=document.querySelector("."+this.options.placeClass+" + "+this.options.itemNodeName),d=this._placeholder.parentElement;if(!o&&d){var p=a(this._placeholder,this.options.itemNodeName);p&&(d.removeChild(this._placeholder),l(this._placeholder,p))}}}if(n.classList.contains("nestable-item-mask")){var m=a(this.pointEl,"."+this.options.rootClass),g=!!m&&this.dragRootEl.dataset["nestable-id"]!==m.dataset["nestable-id"];if(!this._mouse.dirAx||g){if(g&&this.options.group!==m.dataset["nestable-group"])return;if(this.dragDepth-1+r(this.pointEl,this.el.nativeElement.querySelector(this.options.listNodeName)).length>this.options.maxDepth)return;var f,_=e.pageY<h(this.pointEl).top+this.pointEl.clientHeight/2;this._placeholder.parentNode;if(f=r(this.pointEl,this.el.nativeElement.querySelector(this.options.listNodeName)).length,this.options.fixedDepth)if(f===this.relativeDepth-1){var E=this.pointEl.querySelector(this.options.listNodeName);E.children.length||E.appendChild(this._placeholder)}else f===this.relativeDepth&&(_?this.pointEl.parentElement.insertBefore(this._placeholder,this.pointEl):l(this._placeholder,this.pointEl),Array.prototype.indexOf.call(this.pointEl.parentElement.children,this.pointEl)===this.pointEl.parentElement.children.length-1&&l(this._placeholder,this.pointEl));else _?this.pointEl.parentElement.insertBefore(this._placeholder,this.pointEl):l(this._placeholder,this.pointEl)}}}},e.prototype.reset=function(){var e,t,i=Object.keys(this._mouse);try{for(var n=s(i),o=n.next();!o.done;o=n.next()){var l=o.value;this._mouse[l]=0}}catch(t){e={error:t}}finally{try{o&&!o.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}this._itemId=0,this.moving=!1,this.dragEl=null,this.dragRootEl=null,this.dragDepth=0,this.relativeDepth=0,this.hasNewRoot=!1,this.pointEl=null},e.prototype.dragStartFromItem=function(e,t,i){this._registerHandleDirective||this.dragStart(e,t,i)},e.prototype.dragStart=function(e,t,i){if(this._oldListLength=this.list.length,!this.options.disableDrag){if(e.stopPropagation(),e.preventDefault(),e.originalEvent&&(e=e.originalEvent),0===e.type.indexOf("mouse")){if(0!==e.button)return}else if(1!==e.touches.length)return;this.ref.detach(),this._dragIndex=i.indexOf(t),this.dragModel=i.splice(i.indexOf(t),1)[0];var n=a(e.target,this.options.itemNodeName);if(null===n)return;this._parentDragId=Number.parseInt(n.parentElement.parentElement.id);var s=n.getBoundingClientRect();this._showMasks(),this._createDragClone(e,n),this.renderer.setStyle(this.dragEl,"width",s.width+c),this._createPlaceholder(e,n),this.renderer.setStyle(this._placeholder,"height",s.height+c),this._calculateDepth(),this.drag.emit({originalEvent:e,item:t}),this._cancelMouseup=this.renderer.listen(document,"mouseup",this.dragStop.bind(this)),this._cancelMousemove=this.renderer.listen(document,"mousemove",this.dragMove.bind(this))}},e.prototype.dragStop=function(e){if(this._cancelMouseup(),this._cancelMousemove(),this._hideMasks(),this.dragEl){Number.parseInt(this.dragEl.firstElementChild.id);var t=a(this._placeholder,this.options.itemNodeName),i=this._dragIndex!==Array.prototype.indexOf.call(this._placeholder.parentElement.children,this._placeholder),s=Array.prototype.indexOf.call(this._placeholder.parentElement.children,this._placeholder);this._dragIndex===s&&this._oldListLength===this.list.length&&(i=!0),null===t?this.list.splice(Array.prototype.indexOf.call(this._placeholder.parentElement.children,this._placeholder),0,n({},this.dragModel)):(l=this.list,r=Number.parseInt(t.id),h=null,o(l,function(e){if(e.$$id===Number.parseInt(r))return h=e,!0}),(t=h).children?t.children.splice(Array.prototype.indexOf.call(this._placeholder.parentElement.children,this._placeholder),0,n({},this.dragModel)):(t.children=[],t.children.push(n({},this.dragModel))),s===this._dragIndex&&(i=!1),i||(i=t.$$id!==this._parentDragId)),this._placeholder.parentElement.removeChild(this._placeholder),this.dragEl.parentNode.removeChild(this.dragEl),this.dragEl.remove(),this.reset(),this.listChange.emit(this.list),this.drop.emit({originalEvent:e,destination:t,item:this.dragModel,changedElementPosition:i}),this.ref.reattach()}var l,r,h},e.prototype.dragMove=function(e){this.dragEl&&(e.preventDefault(),e.originalEvent&&(e=e.originalEvent),this._move(0===e.type.indexOf("mouse")?e:e.touches[0]))},e.prototype.expandAll=function(){o(this._list,function(e){e.$$expanded=!0}),this.ref.markForCheck()},e.prototype.collapseAll=function(){o(this._list,function(e){e.$$expanded=!1}),this.ref.markForCheck()},e.decorators=[{type:t.Component,args:[{selector:"ngx-nestable",template:'<ng-container *ngTemplateOutlet="nestableList; context:{nestable: list, depth: 0}">\n</ng-container>\n\n<ng-template #nestableList let-nestable="nestable" let-depth="depth">\n    <ul [style.padding-left.px]="depth ? options.threshold : 0"\n        [class]="options.listClass">\n        <li [class]="options.itemClass" [id]="item.$$id" *ngFor="let item of nestable">\n\n            <ng-container *ngTemplateOutlet="nestableItem; context:{nestable: nestable, item: item, depth: depth}">\n            </ng-container>\n\n            <ng-container *ngIf="item.children && item.$$expanded">\n                <ng-container *ngTemplateOutlet="nestableList; context:{nestable: item.children, depth: depth + 1}">\n                </ng-container>\n            </ng-container>\n\n            <ul [class]="options.listClass" [style.padding-left.px]="options.threshold"></ul>\n        </li>\n    </ul>\n</ng-template>\n\n<ng-template #nestableItem let-parentList="nestable" let-item="item" let-depth="depth">\n    <div class="nestable-item-container mat-list-item" (mousedown)="dragStartFromItem($event, item, parentList)">\n        <ng-container\n            *ngTemplateOutlet="template; context:{$implicit: {item: item, parentList: parentList}, depth: depth}">\n        </ng-container>\n\n        <div class="nestable-item-mask"></div>\n    </div>\n</ng-template>\n',encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["@import url(https://fonts.googleapis.com/css?family=Roboto);ul .dd-placeholder{margin:5px 0;padding:0;min-height:30px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box}ul li .nestable-item-mask{display:none;position:absolute;top:0;bottom:0;right:0;left:0;z-index:9998}ul li .nestable-expand-button{display:block;position:relative;cursor:pointer;float:left;width:25px;height:14px;padding:0;white-space:nowrap;overflow:hidden;border:0;background:0 0;font-size:18px;line-height:1;text-align:center;font-weight:700;outline:0}ul li .nestable-item-container{position:relative;display:flex;flex-direction:row;align-items:center;color:rgba(0,0,0,.87);min-height:32px;font-size:16px;font-family:Roboto,sans-serif;cursor:pointer;outline:0;margin-bottom:2px;padding-left:8px}ul li .nestable-item-container:hover{background:rgba(0,0,0,.04)}ol,ul{list-style:none}"]}]}],e.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:t.Renderer2},{type:t.ElementRef},{type:t.NgZone}]},e.propDecorators={listChange:[{type:t.Output}],drop:[{type:t.Output}],drag:[{type:t.Output}],disclosure:[{type:t.Output}],template:[{type:t.Input}],options:[{type:t.Input}],disableDrag:[{type:t.Input}],list:[{type:t.Input}]},e}();var g=function(){function e(e){this._el=e}return e.prototype.onMouseDown=function(e){var t={param:this.ngxNestableDragHandle,event:e};this._el.nativeElement.dispatchEvent(new CustomEvent("NESTABLE_DRAG_HANDLE_START",{bubbles:!0,detail:t}))},e.prototype.ngOnInit=function(){this._el.nativeElement.dispatchEvent(new CustomEvent("NESTABLE_DRAG_HANDLE_REGISTER",{bubbles:!0,detail:this.ngxNestableDragHandle}))},e.decorators=[{type:t.Directive,args:[{selector:"[ngxNestableDragHandle]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={ngxNestableDragHandle:[{type:t.Input}],onMouseDown:[{type:t.HostListener,args:["mousedown",["$event"]]}]},e}();var f=function(){function e(e){this._el=e}return e.prototype.onMouseDown=function(e){e.stopPropagation()},e.prototype.onClick=function(e){this.ngxNestableExpandCollapse.item.$$expanded=!this.ngxNestableExpandCollapse.item.$$expanded,this._el.nativeElement.dispatchEvent(new CustomEvent("NESTABLE_EXPAND_COLLAPSE_EVENT",{bubbles:!0,detail:this.ngxNestableExpandCollapse}))},e.decorators=[{type:t.Directive,args:[{selector:"[ngxNestableExpandCollapse]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={ngxNestableExpandCollapse:[{type:t.Input}],onMouseDown:[{type:t.HostListener,args:["mousedown",["$event"]]}],onClick:[{type:t.HostListener,args:["click",["$event"]]}]},e}();var _=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],declarations:[m,g,f],exports:[m,g,f]}]}],e}();e.NestableComponent=m,e.NestableModule=_,e.ɵa=g,e.ɵb=f,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-nestable.umd.min.js.map