ngb-context-menu
Version:
A simple context menu library, based on ng-bootstrap library
121 lines (114 loc) • 10.1 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Input, Output, Directive, HostListener, NgModule } from '@angular/core';
import * as i1 from '@ng-bootstrap/ng-bootstrap';
import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import * as i2 from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
class ContextMenuComponent {
constructor() {
this.menuItems = [];
this.selectedMenuItem = new EventEmitter();
this.contextMenuPosition = { x: '0px', y: '0px' };
}
onContextMenu(event) {
var _a;
event.preventDefault();
(_a = this.myContextMenu) === null || _a === void 0 ? void 0 : _a.open();
if (this.contextMenuPosition) {
this.contextMenuPosition.x = !!(event === null || event === void 0 ? void 0 : event.clientX) ? event.clientX + 'px' : this.contextMenuPosition.x + 'px';
this.contextMenuPosition.y = !!(event === null || event === void 0 ? void 0 : event.clientY) ? event.clientY + 'px' : this.contextMenuPosition.y + 'px';
}
}
ngOnDestroy() {
this.myContextMenu = null;
this.menuItems = null;
this.selectedMenuItem = null;
this.contextMenuPosition = null;
}
}
ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ContextMenuComponent, selector: "ngb-context-menu", inputs: { menuItems: "menuItems" }, outputs: { selectedMenuItem: "selectedMenuItem" }, viewQueries: [{ propertyName: "myContextMenu", first: true, predicate: ["myContextMenu"], descendants: true }], ngImport: i0, template: "<div\n ngbDropdown\n #myContextMenu=\"ngbDropdown\"\n [style.position]=\"'fixed'\"\n [style.left]=\"contextMenuPosition?.x\"\n [style.top]=\"contextMenuPosition?.y\"\n [style.z-index]=\"1099\"\n>\n <div ngbDropdownMenu class=\"ngb-context-menu\">\n <ng-container *ngFor=\"let item of menuItems\">\n <ng-container *ngIf=\"item.isDivider; else menuItem\">\n <div class=\"dropdown-divider ngb-context-menu-divider\"></div>\n </ng-container>\n <ng-template #menuItem>\n <div ngbDropdownItem [disabled]=\"!!item.disabled\" (click)=\"selectedMenuItem?.emit(item.id)\" class=\"ngb-context-menu-item\">\n <span *ngIf=\"item.icon\" class=\"ngb-icon {{item.icon}}\" [title]=\"item.iconTitle\"></span>\n <span>{{ item.label }}</span>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".ngb-context-menu{box-shadow:1px 1px 3px #44444480;padding:1px 0}.ngb-context-menu .dropdown-divider{margin:.3rem 0!important}.ngb-context-menu .dropdown-item,.ngb-context-menu .input-item{padding:0!important;height:28px;line-height:17px;display:inline-flex;cursor:pointer!important}.ngb-context-menu .dropdown-item span,.ngb-context-menu .input-item span{line-height:17px;vertical-align:middle;align-self:center;margin-left:10px;margin-right:25px}.ngb-context-menu .dropdown-item .ngb-icon,.ngb-context-menu .input-item .ngb-icon{font-size:16px;line-height:17px;margin-right:0!important}.ngb-context-menu .dropdown-item:hover,.ngb-context-menu .input-item:hover{background-color:#eeefea}.ngb-context-menu .dropdown-item:active,.ngb-context-menu .input-item:active{background-color:#92a2bd;color:#fff}.ngb-context-menu .input-item input{height:28px;margin-left:10px;margin-right:25px}\n"], directives: [{ type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ContextMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'ngb-context-menu', template: "<div\n ngbDropdown\n #myContextMenu=\"ngbDropdown\"\n [style.position]=\"'fixed'\"\n [style.left]=\"contextMenuPosition?.x\"\n [style.top]=\"contextMenuPosition?.y\"\n [style.z-index]=\"1099\"\n>\n <div ngbDropdownMenu class=\"ngb-context-menu\">\n <ng-container *ngFor=\"let item of menuItems\">\n <ng-container *ngIf=\"item.isDivider; else menuItem\">\n <div class=\"dropdown-divider ngb-context-menu-divider\"></div>\n </ng-container>\n <ng-template #menuItem>\n <div ngbDropdownItem [disabled]=\"!!item.disabled\" (click)=\"selectedMenuItem?.emit(item.id)\" class=\"ngb-context-menu-item\">\n <span *ngIf=\"item.icon\" class=\"ngb-icon {{item.icon}}\" [title]=\"item.iconTitle\"></span>\n <span>{{ item.label }}</span>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".ngb-context-menu{box-shadow:1px 1px 3px #44444480;padding:1px 0}.ngb-context-menu .dropdown-divider{margin:.3rem 0!important}.ngb-context-menu .dropdown-item,.ngb-context-menu .input-item{padding:0!important;height:28px;line-height:17px;display:inline-flex;cursor:pointer!important}.ngb-context-menu .dropdown-item span,.ngb-context-menu .input-item span{line-height:17px;vertical-align:middle;align-self:center;margin-left:10px;margin-right:25px}.ngb-context-menu .dropdown-item .ngb-icon,.ngb-context-menu .input-item .ngb-icon{font-size:16px;line-height:17px;margin-right:0!important}.ngb-context-menu .dropdown-item:hover,.ngb-context-menu .input-item:hover{background-color:#eeefea}.ngb-context-menu .dropdown-item:active,.ngb-context-menu .input-item:active{background-color:#92a2bd;color:#fff}.ngb-context-menu .input-item input{height:28px;margin-left:10px;margin-right:25px}\n"] }]
}], propDecorators: { myContextMenu: [{
type: ViewChild,
args: ['myContextMenu']
}], menuItems: [{
type: Input
}], selectedMenuItem: [{
type: Output
}] } });
class ContextMenuDirective {
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
this.menuItems = [];
this.selectedMenuItem = new EventEmitter();
}
onRightClick(event) {
event.preventDefault();
this.contextMenuComponentRef.instance.onContextMenu(event);
}
ngOnInit() {
var _a;
this.contextMenuComponentRef = this.viewContainerRef.createComponent(ContextMenuComponent);
this.contextMenuComponentRef.instance.menuItems = this.menuItems;
(_a = this.contextMenuComponentRef.instance.selectedMenuItem) === null || _a === void 0 ? void 0 : _a.subscribe((selectedId) => this.selectedMenuItem.emit(selectedId));
}
}
ContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ContextMenuDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
ContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ContextMenuDirective, selector: "[ngbContextMenu]", inputs: { menuItems: "menuItems" }, outputs: { selectedMenuItem: "selectedMenuItem" }, host: { listeners: { "contextmenu": "onRightClick($event)" } }, providers: [NgbDropdown], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ContextMenuDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngbContextMenu]',
providers: [NgbDropdown],
}]
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { menuItems: [{
type: Input
}], selectedMenuItem: [{
type: Output
}], onRightClick: [{
type: HostListener,
args: ['contextmenu', ['$event']]
}] } });
class NgbContextMenuModule {
}
NgbContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgbContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgbContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgbContextMenuModule, declarations: [ContextMenuComponent,
ContextMenuDirective], imports: [BrowserModule,
FormsModule,
NgbDropdownModule], exports: [ContextMenuComponent,
ContextMenuDirective] });
NgbContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgbContextMenuModule, imports: [[
BrowserModule,
FormsModule,
NgbDropdownModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgbContextMenuModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ContextMenuComponent,
ContextMenuDirective,
],
imports: [
BrowserModule,
FormsModule,
NgbDropdownModule
],
exports: [
ContextMenuComponent,
ContextMenuDirective
]
}]
}] });
/*
* Public API Surface of ngb-context-menu
*/
/**
* Generated bundle index. Do not edit.
*/
export { ContextMenuComponent, ContextMenuDirective, NgbContextMenuModule };
//# sourceMappingURL=ngb-context-menu.mjs.map