ngb-context-menu
Version:
A simple context menu library, based on ng-bootstrap library
39 lines • 10.9 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@ng-bootstrap/ng-bootstrap";
import * as i2 from "@angular/common";
export class ContextMenuComponent {
constructor() {
this.menuItems = [];
this.selectedMenuItem = new EventEmitter();
this.contextMenuPosition = { x: '0px', y: '0px' };
}
onContextMenu(event) {
event.preventDefault();
this.myContextMenu?.open();
if (this.contextMenuPosition) {
this.contextMenuPosition.x = !!event?.clientX ? event.clientX + 'px' : this.contextMenuPosition.x + 'px';
this.contextMenuPosition.y = !!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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dC1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nYi1jb250ZXh0LW1lbnUvc3JjL2xpYi9jb21wb25lbnRzL2NvbnRleHQtbWVudS9jb250ZXh0LW1lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmdiLWNvbnRleHQtbWVudS9zcmMvbGliL2NvbXBvbmVudHMvY29udGV4dC1tZW51L2NvbnRleHQtbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVM3RixNQUFNLE9BQU8sb0JBQW9CO0lBTGpDO1FBVUUsY0FBUyxHQUFnQyxFQUFFLENBQUM7UUFHNUMscUJBQWdCLEdBQWdDLElBQUksWUFBWSxFQUFVLENBQUM7UUFFM0Usd0JBQW1CLEdBQStCLEVBQUUsQ0FBQyxFQUFFLEtBQUssRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLENBQUM7S0FrQjFFO0lBaEJDLGFBQWEsQ0FBQyxLQUFpQjtRQUM3QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLGFBQWEsRUFBRSxJQUFJLEVBQUUsQ0FBQztRQUUzQixJQUFJLElBQUksQ0FBQyxtQkFBbUIsRUFBRTtZQUM1QixJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsR0FBRyxJQUFJLENBQUM7WUFDekcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDO1NBQzFHO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQztRQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztRQUN0QixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDO1FBQzdCLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxJQUFJLENBQUM7SUFDbEMsQ0FBQzs7aUhBM0JVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLCtQQ1RqQyw0MUJBc0JBOzJGRGJhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxrQkFBa0I7OEJBTTVCLGFBQWE7c0JBRFosU0FBUzt1QkFBQyxlQUFlO2dCQUkxQixTQUFTO3NCQURSLEtBQUs7Z0JBSU4sZ0JBQWdCO3NCQURmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uRGVzdHJveSwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nYkRyb3Bkb3duIH0gZnJvbSAnQG5nLWJvb3RzdHJhcC9uZy1ib290c3RyYXAnO1xuaW1wb3J0IHsgTmdiQ29udGV4dE1lbnVJdGVtLCBDb250ZXh0TWVudVBvc2l0aW9uIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2NvbnRleHQtbWVudS5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25nYi1jb250ZXh0LW1lbnUnLFxuICB0ZW1wbGF0ZVVybDogJy4vY29udGV4dC1tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY29udGV4dC1tZW51LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIENvbnRleHRNZW51Q29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgQFZpZXdDaGlsZCgnbXlDb250ZXh0TWVudScpXG4gIG15Q29udGV4dE1lbnUhOiBOZ2JEcm9wZG93biB8IG51bGw7XG5cbiAgQElucHV0KClcbiAgbWVudUl0ZW1zOiBOZ2JDb250ZXh0TWVudUl0ZW1bXSB8IG51bGwgPSBbXTtcblxuICBAT3V0cHV0KClcbiAgc2VsZWN0ZWRNZW51SXRlbTogRXZlbnRFbWl0dGVyPG51bWJlcj4gfCBudWxsID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgY29udGV4dE1lbnVQb3NpdGlvbjogQ29udGV4dE1lbnVQb3NpdGlvbiB8IG51bGwgPSB7IHg6ICcwcHgnLCB5OiAnMHB4JyB9O1xuXG4gIG9uQ29udGV4dE1lbnUoZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMubXlDb250ZXh0TWVudT8ub3BlbigpO1xuXG4gICAgaWYgKHRoaXMuY29udGV4dE1lbnVQb3NpdGlvbikge1xuICAgICAgdGhpcy5jb250ZXh0TWVudVBvc2l0aW9uLnggPSAhIWV2ZW50Py5jbGllbnRYID8gZXZlbnQuY2xpZW50WCArICdweCcgOiB0aGlzLmNvbnRleHRNZW51UG9zaXRpb24ueCArICdweCc7XG4gICAgICB0aGlzLmNvbnRleHRNZW51UG9zaXRpb24ueSA9ICEhZXZlbnQ/LmNsaWVudFkgPyBldmVudC5jbGllbnRZICsgJ3B4JyA6IHRoaXMuY29udGV4dE1lbnVQb3NpdGlvbi55ICsgJ3B4JztcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLm15Q29udGV4dE1lbnUgPSBudWxsO1xuICAgIHRoaXMubWVudUl0ZW1zID0gbnVsbDtcbiAgICB0aGlzLnNlbGVjdGVkTWVudUl0ZW0gPSBudWxsO1xuICAgIHRoaXMuY29udGV4dE1lbnVQb3NpdGlvbiA9IG51bGw7XG4gIH1cbn1cbiIsIjxkaXZcbiAgbmdiRHJvcGRvd25cbiAgI215Q29udGV4dE1lbnU9XCJuZ2JEcm9wZG93blwiXG4gIFtzdHlsZS5wb3NpdGlvbl09XCInZml4ZWQnXCJcbiAgW3N0eWxlLmxlZnRdPVwiY29udGV4dE1lbnVQb3NpdGlvbj8ueFwiXG4gIFtzdHlsZS50b3BdPVwiY29udGV4dE1lbnVQb3NpdGlvbj8ueVwiXG4gIFtzdHlsZS56LWluZGV4XT1cIjEwOTlcIlxuPlxuICA8ZGl2IG5nYkRyb3Bkb3duTWVudSBjbGFzcz1cIm5nYi1jb250ZXh0LW1lbnVcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBpdGVtIG9mIG1lbnVJdGVtc1wiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIml0ZW0uaXNEaXZpZGVyOyBlbHNlIG1lbnVJdGVtXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1kaXZpZGVyIG5nYi1jb250ZXh0LW1lbnUtZGl2aWRlclwiPjwvZGl2PlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8bmctdGVtcGxhdGUgI21lbnVJdGVtPlxuICAgICAgICA8ZGl2IG5nYkRyb3Bkb3duSXRlbSBbZGlzYWJsZWRdPVwiISFpdGVtLmRpc2FibGVkXCIgKGNsaWNrKT1cInNlbGVjdGVkTWVudUl0ZW0/LmVtaXQoaXRlbS5pZClcIiBjbGFzcz1cIm5nYi1jb250ZXh0LW1lbnUtaXRlbVwiPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwiaXRlbS5pY29uXCIgY2xhc3M9XCJuZ2ItaWNvbiB7e2l0ZW0uaWNvbn19XCIgW3RpdGxlXT1cIml0ZW0uaWNvblRpdGxlXCI+PC9zcGFuPlxuICAgICAgICAgIDxzcGFuPnt7IGl0ZW0ubGFiZWwgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==