ng2-right-click-menu/bundles/ng2-right-click-menu.umd.min.js

Right click context menu for Angular

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("rxjs")):"function"==typeof define&&define.amd?define("ng2-right-click-menu",["exports","@angular/core","@angular/common","@angular/cdk/overlay","@angular/cdk/portal","rxjs"],e):e((t=t||self)["ng2-right-click-menu"]={},t.ng.core,t.ng.common,t.ng.cdk.overlay,t.ng.cdk.portal,t.rxjs)}(this,function(t,e,n,o,i,r){"use strict";function s(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var o,i,r=n.call(t),s=[];try{for(;(void 0===e||e-- >0)&&!(o=r.next()).done;)s.push(o.value)}catch(a){i={error:a}}finally{try{o&&!o.done&&(n=r["return"])&&n.call(r)}finally{if(i)throw i.error}}return s}var a=function(){this.$implicit={}},u=function(){function t(t){this.template=t,this.closeOnClick=!0,this.click=new e.EventEmitter,this.context=new a}return t.prototype.setNotActive=function(){this._active=!1,this.subMenu&&this.subMenu.setNotActive()},t.prototype.setActive=function(){this._active=!0},t.decorators=[{type:e.Directive,args:[{selector:"[shContextMenuItem]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef,decorators:[{type:e.Optional}]}]},t.propDecorators={subMenu:[{type:e.Input}],divider:[{type:e.Input}],visible:[{type:e.Input}],disabled:[{type:e.Input}],closeOnClick:[{type:e.Input}],click:[{type:e.Output}]},t}(),c=function(){function t(t){this.overlay=t,this.activeOverlays=[]}return t.prototype.openMenu=function(t){this.closeCurrentOverlays();var e=t.menu,n=t.mouseEvent,o=t.data;this.activeMenu=e,this.anchorElement=this.createAnchorElement();var i=this.buildScrollStrategy(),r=this.buildPositionStrategy(this.anchorElement,n);this.attachContextToItems(e,o);var s=this.createAndAttachOverlay(r,i,e,!0);this.attachOverlayRef(e,s),this.registerDetachEvents(s)},t.prototype.openSubMenu=function(t){var e=t.menu,n=t.mouseEvent,o=t.targetElement,i=t.data,r=t.parentMenu;n.preventDefault(),n.stopPropagation();var s=this.buildScrollStrategy(),a=this.buildPositionStrategyForSubMenu(o),u=this.createAndAttachOverlay(a,s,e,!1);this.attachContextToItems(e,i),this.attachThisContext(e,r),this.attachOverlayRef(e,u)},t.prototype.destroy=function(){this.closeCurrentOverlays(),this.subs.unsubscribe()},t.prototype.ngOnDestroy=function(){this.destroy()},t.prototype.closeSubMenus=function(t){var e=this,n=t.menuItems.filter(function(t){return!!t.subMenu&&!!t.subMenu.overlayRef});n.length&&(n.forEach(function(t){return e.closeSubMenus(t.subMenu)}),n.map(function(t){return t.subMenu.overlayRef}).forEach(function(t){return t.dispose()}))},t.prototype.registerDetachEvents=function(t){this.subs=t.backdropClick().subscribe(this.closeCurrentOverlays.bind(this)),this.subs.add(t.detachments().subscribe(this.closeCurrentOverlays.bind(this)))},t.prototype.createAndAttachOverlay=function(t,e,n,o){void 0===o&&(o=!0);var r=this.overlay.create({positionStrategy:t,scrollStrategy:e,hasBackdrop:o,backdropClass:"sh-backdrop"}),s=new i.TemplatePortal(n.menuTemplate,n.menuContainer);return r.attach(s),this.activeOverlays.push(r),r},t.prototype.buildScrollStrategy=function(){return this.overlay.scrollStrategies.reposition({autoClose:!0})},t.prototype.buildPositionStrategy=function(t,e){var n=e.x,o=e.y;return this.overlay.position().flexibleConnectedTo(t).withDefaultOffsetX(n).withDefaultOffsetY(o).withPositions(this.buildPositions()).withFlexibleDimensions(!1).withPush(!0)},t.prototype.buildPositionStrategyForSubMenu=function(t){return this.overlay.position().flexibleConnectedTo(t).withPositions(this.buildSubMenuPositions()).withFlexibleDimensions(!1).withPush(!0)},t.prototype.closeCurrentOverlays=function(){this.anchorElement&&this.anchorElement.remove(),this.activeOverlays.forEach(function(t){t.detach(),t.dispose()}),this.activeOverlays=[],this.activeMenu&&this.activeMenu.close()},t.prototype.attachContextToItems=function(t,e){t.menuItems.forEach(function(t){return t.context.$implicit=e})},t.prototype.attachThisContext=function(t,e){t.thisContext=e.thisContext},t.prototype.attachOverlayRef=function(t,e){t.overlayRef=e},t.prototype.createAnchorElement=function(){var t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.bottom="0",t.style.left="0",t.style.right="0",document.body.appendChild(t),t},t.prototype.buildSubMenuPositions=function(){return[{originX:"end",originY:"top",overlayX:"start",overlayY:"top"},{originX:"start",originY:"top",overlayX:"end",overlayY:"top"},{originX:"end",originY:"bottom",overlayX:"start",overlayY:"bottom"},{originX:"start",originY:"bottom",overlayX:"end",overlayY:"bottom"}]},t.prototype.buildPositions=function(){return[{originX:"start",originY:"top",overlayX:"start",overlayY:"top"},{originX:"start",originY:"top",overlayX:"end",overlayY:"top"},{originX:"start",originY:"top",overlayX:"start",overlayY:"bottom"},{originX:"start",originY:"top",overlayX:"end",overlayY:"bottom"}]},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:o.Overlay}]},t}(),l=function(){function t(t){this.ctxService=t,this.contentChildrenItems=new e.QueryList,this.viewChildrenItems=new e.QueryList}return Object.defineProperty(t.prototype,"menuItems",{get:function(){return this.contentChildrenItems.length?this.contentChildrenItems:this.viewChildrenItems},enumerable:!0,configurable:!0}),t.prototype.onEnter=function(t,n,o){this.ctxService.closeSubMenus(this),this.setNotActive(),n.subMenu&&(this.setActive(n),this.ctxService.openSubMenu({data:n.context.$implicit,targetElement:new e.ElementRef(o),menu:n.subMenu,mouseEvent:t,parentMenu:this}))},t.prototype.setActive=function(t){t.setActive(),this.subActive=!0},t.prototype.onClick=function(t,e){e.divider||!e.subMenu&&e.closeOnClick&&(this.ctxService.destroy(),e.click.emit({data:e.context.$implicit,event:t}))},t.prototype.callWithContext=function(t,e,n,o){return t.call(this.thisContext?this.thisContext:e,{data:n,event:o})},t.prototype.close=function(){this.setNotActive(),this.menuContainer.detach(),this.overlayRef&&this.overlayRef.detach()},t.prototype.ngOnDestroy=function(){this.close()},t.prototype.setNotActive=function(){this.subActive=!1,this.menuItems.forEach(function(t){return t.setNotActive()})},t.prototype.isVisible=function(t){return!t.visible||this.callWithContext(t.visible,this,t.context.$implicit,null)},t.decorators=[{type:e.Component,args:[{selector:"sh-context-menu",encapsulation:e.ViewEncapsulation.None,template:'\n\t\t<ng-container #menuContainer></ng-container>\n\t\t<ng-template #menuTemplate>\n\t\t\t<div class="sh-context-menu">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor="let menuItem of menuItems"\n\t\t\t\t\t#itemElement\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'sh-sub-anchor\': menuItem.subMenu,\n\t\t\t\t\t\t\'sh-context-menu--item__divider\': menuItem.divider,\n\t\t\t\t\t\t\'sh-context-menu--item__sub-active\': subActive && menuItem.active\n\t\t\t\t\t}"\n\t\t\t\t\tclass="sh-context-menu--item"\n\t\t\t\t\t(mouseenter)="onEnter($event, menuItem, itemElement)"\n\t\t\t\t\t(click)="onClick($event, menuItem)"\n\t\t\t\t>\n\t\t\t\t\t<ng-container *ngIf="!menuItem.divider || !isVisible(menuItem)">\n\t\t\t\t\t\t<ng-content\n\t\t\t\t\t\t\t*ngTemplateOutlet="menuItem.template; context: menuItem.context"\n\t\t\t\t\t\t></ng-content>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-template>\n\t',styles:[".sh-backdrop{background-color:transparent}.sh-context-menu{background:#ececec;min-width:150px;border:1px solid rgba(0,0,0,.2);border-radius:3px;box-shadow:0 0 10px 2px rgba(0,0,0,.1);color:#000;padding:5px 0;margin:0}.sh-context-menu--item{padding:5px 10px 5px 15px;-webkit-transition:.15s;transition:.15s}.sh-context-menu--item:hover,.sh-context-menu--item__sub-active{background-color:#4b8bec;color:#fff;cursor:pointer}.sh-context-menu--item.sh-context-menu--item__divider:hover{background-color:#ececec;color:#000;cursor:default}.sh-context-menu--item__divider{height:1px;margin:1px 1px 8px;overflow:hidden;border-bottom:1px solid #d0d0d0}.sh-context-menu--item.sh-sub-anchor{position:relative;min-width:160px}.sh-sub-anchor:after{content:'';top:50%;right:6px;-webkit-transform:translateY(-50%);transform:translateY(-50%);position:absolute;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid #000}"]}]}],t.ctorParameters=function(){return[{type:c}]},t.propDecorators={thisContext:[{type:e.Input,args:["this"]}],contentChildrenItems:[{type:e.ContentChildren,args:[u,{read:u}]}],viewChildrenItems:[{type:e.ViewChildren,args:[u,{read:u}]}],menuTemplate:[{type:e.ViewChild,args:["menuTemplate",{read:e.TemplateRef,"static":!0}]}],menuContainer:[{type:e.ViewChild,args:["menuContainer",{read:e.ViewContainerRef,"static":!0}]}]},t}(),p=function(){function t(t,n){this.ctxService=t,this.elm=n,this.open=new e.EventEmitter}return t.prototype.ngOnInit=function(){this.setupEvents()},t.prototype.setupEvents=function(){var t=this,e=[];this.triggers?this.triggers.forEach(function(n){e.push(r.fromEvent(t.elm.nativeElement,n))}):e.push(r.fromEvent(this.elm.nativeElement,"contextmenu")),this.sub=r.merge.apply(void 0,function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(s(arguments[e]));return t}(e)).subscribe(this.openMenu.bind(this))},t.prototype.openMenu=function(t){t.preventDefault(),t.stopPropagation();var e=!1;this.open.emit({data:this.data,mouseEvent:t,preventOpen:function(){e=!0}}),e||this.ctxService.openMenu({menu:this.menu,mouseEvent:t,targetElement:this.elm,data:this.data})},t.prototype.ngOnDestroy=function(){this.sub&&this.sub.unsubscribe()},t.decorators=[{type:e.Directive,args:[{selector:"[shAttachMenu]"}]}],t.ctorParameters=function(){return[{type:c},{type:e.ElementRef}]},t.propDecorators={menu:[{type:e.Input,args:["shAttachMenu"]}],triggers:[{type:e.Input,args:["shMenuTriggers"]}],data:[{type:e.Input,args:["shMenuData"]}],open:[{type:e.Output}]},t}(),h=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[p,l,u],exports:[p,l,u],providers:[c],imports:[n.CommonModule,o.OverlayModule],entryComponents:[l]}]}],t}();t.ShAttachMenuDirective=p,t.ShContextMenuComponent=l,t.ShContextMenuItemDirective=u,t.ShContextMenuModule=h,t.ShContextMenuService=c,t.ɵa=a,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ng2-right-click-menu.umd.min.js.map