UNPKG

ngx-right-click-menu

Version:

ngx-right-click-menu is right click context menu for Angular 2+.

2 lines 6 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/animations"),require("@angular/common"),require("@angular/material"),require("@angular/core")):"function"==typeof define&&define.amd?define("ngx-right-click-menu",["exports","@angular/animations","@angular/common","@angular/material","@angular/core"],e):e(t["ngx-right-click-menu"]={},t.ng.animations,t.ng.common,t.ng.material,t.ng.core)}(this,function(t,e,n,i,o){"use strict";var r=function(){function t(){}return t.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=o.defineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),a=function(){function t(t){this._element=t,this.itemClicked=new o.EventEmitter,this.top=0,this.left=0}return t.prototype.ngOnInit=function(){},t.prototype.ngAfterViewInit=function(){this.position(this._element.nativeElement.clientWidth,this._element.nativeElement.clientHeight)},t.prototype.position=function(t,e){void 0===t&&(t=130),void 0===e&&(e=340);var n=this._element.nativeElement;n.style.position="fixed";var i=window.innerWidth-this.left;i<t?n.style.right=i+"px":n.style.left=this.left+"px",(i=window.innerHeight-this.top)<e?n.style.bottom=i+"px":n.style.top=this.top+"px",n.style.zIndex="9999"},t.prototype.closeMenu=function(t){t.preventDefault(),this.itemClicked.emit()},t.prototype.itemClick=function(t,e){var n=this;this.items[e].disable||(this.items[e].action&&"function"==typeof this.items[e].action&&this.items[e].action(),setTimeout(function(){n.closeMenu(t)},200))},t.decorators=[{type:o.Component,args:[{selector:"ngx-right-click-menu",template:'\n <mat-card class="ngx-context-menu" #ngxContextRef [@fadeInOut]>\n <mat-card-header>\n <mat-card-title>{{ title }}</mat-card-title>\n </mat-card-header>\n <mat-card-content>\n <mat-nav-list role="list" class=\'menu-list\'>\n <mat-list-item role="listitem" *ngFor="let item of items; let i = index"\n (click)="itemClick($event,i)"\n [disableRipple]=\'item.disable\'\n [class.disable]=\'item.disable\'>\n <mat-icon *ngIf=\'item.icon\' mat-list-icon>{{ item.icon }}</mat-icon>\n <h5>{{ item.label }}</h5>\n </mat-list-item>\n </mat-nav-list>\n </mat-card-content>\n </mat-card>\n',animations:[e.trigger("fadeInOut",[e.state("void",e.style({opacity:0})),e.transition("void <=> *",e.animate(500))])],styles:[".overlay-backdrop {\n position: fixed;\n top: 0px;\n bottom: 0px;\n right: 0px;\n left: 0px;\n z-index: 1000;\n }\n ",".ngx-context-menu {\n position: relative;\n z-index: 9999;\n cursor: pointer;\n background: #fff;\n padding: 16px 0px 0px;\n user-select: none;\n }",".mat-card-title {\n margin-bottom: 0px !important;\n }",".mat-list-item {\n height: 36px !important;\n }",".mat-list-item.disable {\n cursor: not-allowed;\n background: rgba(0, 0, 0, 0.06);\n }",".mat-list-item h5 {\n padding-left: 4px;\n margin: 8px 0px;\n font-weight: 500;\n }\n }",".mat-list-icon {\n color: rgba(0, 0, 0, 0.54);\n }",".menu-list {\n padding: 0px;\n }"]}]}],t.ctorParameters=function(){return[{type:o.ElementRef}]},t.propDecorators={itemClicked:[{type:o.Output}],title:[{type:o.Input}],items:[{type:o.Input}]},t}(),s=function(){function t(t){this._element=t,this.backDropClick=new o.EventEmitter;var e=this._element.nativeElement;e.style.position="fixed",e.style.top="0px",e.style.bottom="0px",e.style.left="0px",e.style.right="0px",e.style.zIndex="1000"}return t.prototype.closeMenu=function(t){t.preventDefault(),this.backDropClick.emit()},t.decorators=[{type:o.Component,args:[{selector:"ngx-right-click-menu-backdrop",template:"\n <div class='overlay-backdrop' (contextmenu)='closeMenu($event)' (click)='closeMenu($event)'></div>\n ",styles:[".overlay-backdrop {\n position: fixed;\n top: 0px;\n bottom: 0px;\n right: 0px;\n left: 0px;\n z-index: 1000;\n }"]}]}],t.ctorParameters=function(){return[{type:o.ElementRef}]},t.propDecorators={backDropClick:[{type:o.Output}]},t}(),c=function(){function t(t,e,n){var i=this;this._componentResolver=t,this._viewContainerRef=e,this._backdropRef=n,this.menuContext=function(t){return i.openMenu(t)},this.items=[]}return Object.defineProperty(t.prototype,"ngxContextMenu",{set:function(t){this.title=t.title,this.items=t.items},enumerable:!0,configurable:!0}),t.prototype.openMenu=function(t){var e=this;t.preventDefault(),t.stopPropagation(),this._viewContainerRef.clear();var n=this._componentResolver.resolveComponentFactory(s),i=this._viewContainerRef.createComponent(n),o=this._componentResolver.resolveComponentFactory(a),r=this._viewContainerRef.createComponent(o);this._contextMenu=r.instance,this._contextMenu.top=t.clientY,this._contextMenu.left=t.clientX,this._contextMenu.position(),this._contextMenu.title=this.title,this._contextMenu.items=this.items,i.instance.backDropClick.subscribe(function(){e._viewContainerRef.clear()}),this._contextMenu.itemClicked.subscribe(function(){e._viewContainerRef.clear()})},t.decorators=[{type:o.Directive,args:[{selector:"[ngxContextMenu]"}]}],t.ctorParameters=function(){return[{type:o.ComponentFactoryResolver},{type:o.ViewContainerRef},{type:o.ViewContainerRef}]},t.propDecorators={ngxContextMenu:[{type:o.Input}],menuContext:[{type:o.HostListener,args:["contextmenu",["$event"]]}]},t}(),l=function(){function t(){}return t.decorators=[{type:o.NgModule,args:[{declarations:[a,c,s],imports:[n.CommonModule,i.MatListModule,i.MatIconModule,i.MatCardModule],exports:[a,c],entryComponents:[a,s]}]}],t}();t.NgxRightClickMenuService=r,t.NgxRightClickMenuComponent=a,t.NgxRightClickMenuModule=l,t.NgxRightClickMenuDirective=c,t.ɵa=s,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-right-click-menu.umd.min.js.map