@dotglitch/ngx-ctx-menu
Version:
Angular context menu that works with templates
92 lines • 11.4 kB
JavaScript
import { Directive, Input, HostListener, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { TooltipComponent, calcTooltipBounds } from './tooltip/tooltip.component';
import { getPosition } from './utils';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
export class NgxTooltipDirective {
constructor(dialog, viewContainer) {
this.dialog = dialog;
this.viewContainer = viewContainer;
/**
* Configuration for opening the app menu
*/
this.config = {};
/**
* Arbitrary data to pass into the template
*/
this.data = {};
}
ngOnInit() {
}
// Needs to be public so we can manually open the dialog
async onPointerEnter(evt) {
// If the template is not a template ref, do nothing.
if (!(this.template instanceof TemplateRef))
return;
const el = this.viewContainer.element.nativeElement;
this.dialogInstance = await openTooltip(this.dialog, this.template, this.data, el, this.config);
}
}
/** @nocollapse */ NgxTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgxTooltipDirective, deps: [{ token: i1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ NgxTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgxTooltipDirective, isStandalone: true, selector: "[ngxTooltip],[ngx-tooltip]", inputs: { template: ["ngx-tooltip", "template"], config: ["ngx-tooltip-config", "config"], data: ["ngx-tooltip-context", "data"] }, host: { listeners: { "pointerenter": "onPointerEnter($event)" } }, providers: [
MatDialog
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgxTooltipDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxTooltip],[ngx-tooltip]',
providers: [
MatDialog
],
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
type: Input,
args: ["ngxTooltip"]
}, {
type: Input,
args: ["ngx-tooltip"]
}], config: [{
type: Input,
args: ["ngxTooltipConfig"]
}, {
type: Input,
args: ["ngx-tooltip-config"]
}], data: [{
type: Input,
args: ["ngxTooltipContext"]
}, {
type: Input,
args: ["ngx-tooltip-context"]
}], onPointerEnter: [{
type: HostListener,
args: ['pointerenter', ['$event']]
}] } });
// Helper to open the context menu without using the directive.
export const openTooltip = async (dialog, template, data, el, config) => {
const rect = await calcTooltipBounds(template, data);
const ownerCords = el.getBoundingClientRect();
const cords = getPosition(el, config, rect);
const specificId = crypto.randomUUID();
return new Promise(res => {
dialog.open(TooltipComponent, {
data: {
data: data,
template: template,
config: config,
ownerCords: ownerCords,
selfCords: cords,
id: specificId
},
panelClass: ["ngx-tooltip", 'ngx-' + specificId].concat(config?.customClass || []),
position: cords,
hasBackdrop: false
})
.afterClosed()
.subscribe(s => {
res(s);
});
});
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3Rvb2x0aXAuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQTBCLE1BQU0sZUFBZSxDQUFDO0FBQ3BHLE9BQU8sRUFBRSxTQUFTLEVBQWdCLE1BQU0sMEJBQTBCLENBQUM7QUFDbkUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGlCQUFpQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDbEYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLFNBQVMsQ0FBQzs7O0FBc0N0QyxNQUFNLE9BQU8sbUJBQW1CO0lBbUI1QixZQUNZLE1BQWlCLEVBQ2pCLGFBQStCO1FBRC9CLFdBQU0sR0FBTixNQUFNLENBQVc7UUFDakIsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBZDNDOztXQUVHO1FBRTBCLFdBQU0sR0FBc0IsRUFBRSxDQUFDO1FBRTVEOztXQUVHO1FBRTJCLFNBQUksR0FBUSxFQUFFLENBQUM7SUFNN0MsQ0FBQztJQUVELFFBQVE7SUFDUixDQUFDO0lBSUQsd0RBQXdEO0lBRWpELEtBQUssQ0FBQyxjQUFjLENBQUMsR0FBaUI7UUFDekMscURBQXFEO1FBQ3JELElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLFlBQVksV0FBVyxDQUFDO1lBQ3ZDLE9BQU87UUFFWCxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUM7UUFDcEQsSUFBSSxDQUFDLGNBQWMsR0FBRyxNQUFNLFdBQVcsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3BHLENBQUM7O21JQXZDUSxtQkFBbUI7dUhBQW5CLG1CQUFtQixnUkFMakI7UUFDUCxTQUFTO0tBQ1o7MkZBR1EsbUJBQW1CO2tCQVAvQixTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSw0QkFBNEI7b0JBQ3RDLFNBQVMsRUFBRTt3QkFDUCxTQUFTO3FCQUNaO29CQUNELFVBQVUsRUFBRSxJQUFJO2lCQUNuQjsrSEFNeUIsUUFBUTtzQkFEN0IsS0FBSzt1QkFBQyxZQUFZOztzQkFDbEIsS0FBSzt1QkFBQyxhQUFhO2dCQU1TLE1BQU07c0JBRGxDLEtBQUs7dUJBQUMsa0JBQWtCOztzQkFDeEIsS0FBSzt1QkFBQyxvQkFBb0I7Z0JBTUcsSUFBSTtzQkFEakMsS0FBSzt1QkFBQyxtQkFBbUI7O3NCQUN6QixLQUFLO3VCQUFDLHFCQUFxQjtnQkFlZixjQUFjO3NCQUQxQixZQUFZO3VCQUFDLGNBQWMsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7QUFXNUMsK0RBQStEO0FBQy9ELE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxLQUFLLEVBQzVCLE1BQWlCLEVBQ2pCLFFBQXNDLEVBQ3RDLElBQVMsRUFDVCxFQUFlLEVBQ2YsTUFBMEIsRUFDNUIsRUFBRTtJQUVBLE1BQU0sSUFBSSxHQUFHLE1BQU0saUJBQWlCLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3JELE1BQU0sVUFBVSxHQUFHLEVBQUUsQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO0lBQzlDLE1BQU0sS0FBSyxHQUFHLFdBQVcsQ0FBQyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQzVDLE1BQU0sVUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUV2QyxPQUFPLElBQUksT0FBTyxDQUFDLEdBQUcsQ0FBQyxFQUFFO1FBQ3JCLE1BQU0sQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDMUIsSUFBSSxFQUFFO2dCQUNGLElBQUksRUFBRSxJQUFJO2dCQUNWLFFBQVEsRUFBRSxRQUFRO2dCQUNsQixNQUFNLEVBQUUsTUFBTTtnQkFDZCxVQUFVLEVBQUUsVUFBVTtnQkFDdEIsU0FBUyxFQUFFLEtBQUs7Z0JBQ2hCLEVBQUUsRUFBRSxVQUFVO2FBQ2pCO1lBQ0QsVUFBVSxFQUFFLENBQUMsYUFBYSxFQUFFLE1BQU0sR0FBRyxVQUFVLENBQUMsQ0FBQyxNQUFNLENBQUMsTUFBTSxFQUFFLFdBQVcsSUFBSSxFQUFFLENBQUM7WUFDbEYsUUFBUSxFQUFFLEtBQUs7WUFDZixXQUFXLEVBQUUsS0FBSztTQUNyQixDQUFDO2FBQ0csV0FBVyxFQUFFO2FBQ2IsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ1gsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ1gsQ0FBQyxDQUFDLENBQUE7SUFDVixDQUFDLENBQWlCLENBQUM7QUFDdkIsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBJbnB1dCwgSG9zdExpc3RlbmVyLCBUZW1wbGF0ZVJlZiwgVHlwZSwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RGlhbG9nLCBNYXREaWFsb2dSZWYgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xuaW1wb3J0IHsgVG9vbHRpcENvbXBvbmVudCwgY2FsY1Rvb2x0aXBCb3VuZHMgfSBmcm9tICcuL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQnO1xuaW1wb3J0IHsgZ2V0UG9zaXRpb24gfSBmcm9tICcuL3V0aWxzJztcblxuZXhwb3J0IHR5cGUgTmd4VG9vbHRpcE9wdGlvbnMgPSBQYXJ0aWFsPHtcbiAgICAvKipcbiAgICAgKiBQb3NpdGlvbiByZWxhdGl2ZSB0byB0aGUgZWxlbWVudCB0aGUgbWVudSBwb3BzLXVwIGF0XG4gICAgICovXG4gICAgcG9zaXRpb246IFwidG9wXCIgfCBcInJpZ2h0XCIgfCBcImJvdHRvbVwiIHwgXCJsZWZ0XCIsXG4gICAgLyoqXG4gICAgICogSG93IHRoZSBwb3B1cCBpcyBhbGlnbmVkIHJlbGF0aXZlIHRvIHRoZSBlbGVtZW50XG4gICAgICovXG4gICAgYWxpZ25tZW50OiBcImNlbnRlclwiIHwgXCJiZWZvcmVzdGFydFwiIHwgXCJzdGFydFwiIHwgXCJlbmRcIiB8IFwiYWZ0ZXJlbmRcIixcbiAgICAvKipcbiAgICAgKiBAaGlkZGVuXG4gICAgICogV0lQOlxuICAgICAqIFNob3cgYW4gZXJyb3IgZnJvbSB0aGUgZGlhbG9nIHBvaW50aW5nIHRvIHRoZSBlbGVtZW50XG4gICAgICovXG4gICAgc2hvd0Fycm93OiBib29sZWFuLFxuICAgIC8qKlxuICAgICAqIEBoaWRkZW5cbiAgICAgKiBXSVA6XG4gICAgICogU2l6ZSBvZiB0aGUgYXJyb3cuXG4gICAgICovXG4gICAgYXJyb3dTaXplOiBudW1iZXIsXG4gICAgLyoqXG4gICAgICogSG93IG11Y2ggcGFkZGluZyB0byBhZGQgbmVhciB0aGUgZWRnZXMgb2YgdGhlIHNjcmVlbi5cbiAgICAgKi9cbiAgICBlZGdlUGFkZGluZzogbnVtYmVyLFxuXG4gICAgY3VzdG9tQ2xhc3M6IHN0cmluZ1tdXG59PjtcblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbbmd4VG9vbHRpcF0sW25neC10b29sdGlwXScsXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIE1hdERpYWxvZ1xuICAgIF0sXG4gICAgc3RhbmRhbG9uZTogdHJ1ZVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hUb29sdGlwRGlyZWN0aXZlIHtcblxuICAgIC8qKlxuICAgICAqL1xuICAgIEBJbnB1dChcIm5neFRvb2x0aXBcIilcbiAgICBASW5wdXQoXCJuZ3gtdG9vbHRpcFwiKSB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IFR5cGU8YW55PjtcblxuICAgIC8qKlxuICAgICAqIENvbmZpZ3VyYXRpb24gZm9yIG9wZW5pbmcgdGhlIGFwcCBtZW51XG4gICAgICovXG4gICAgQElucHV0KFwibmd4VG9vbHRpcENvbmZpZ1wiKVxuICAgIEBJbnB1dChcIm5neC10b29sdGlwLWNvbmZpZ1wiKSBjb25maWc6IE5neFRvb2x0aXBPcHRpb25zID0ge307XG5cbiAgICAvKipcbiAgICAgKiBBcmJpdHJhcnkgZGF0YSB0byBwYXNzIGludG8gdGhlIHRlbXBsYXRlXG4gICAgICovXG4gICAgQElucHV0KFwibmd4VG9vbHRpcENvbnRleHRcIilcbiAgICBASW5wdXQoXCJuZ3gtdG9vbHRpcC1jb250ZXh0XCIpIGRhdGE6IGFueSA9IHt9O1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgZGlhbG9nOiBNYXREaWFsb2csXG4gICAgICAgIHByaXZhdGUgdmlld0NvbnRhaW5lcjogVmlld0NvbnRhaW5lclJlZlxuICAgICkge1xuICAgIH1cblxuICAgIG5nT25Jbml0KCkge1xuICAgIH1cblxuICAgIHByaXZhdGUgZGlhbG9nSW5zdGFuY2U6IE1hdERpYWxvZ1JlZjxhbnk+O1xuXG4gICAgLy8gTmVlZHMgdG8gYmUgcHVibGljIHNvIHdlIGNhbiBtYW51YWxseSBvcGVuIHRoZSBkaWFsb2dcbiAgICBASG9zdExpc3RlbmVyKCdwb2ludGVyZW50ZXInLCBbJyRldmVudCddKVxuICAgIHB1YmxpYyBhc3luYyBvblBvaW50ZXJFbnRlcihldnQ6IFBvaW50ZXJFdmVudCkge1xuICAgICAgICAvLyBJZiB0aGUgdGVtcGxhdGUgaXMgbm90IGEgdGVtcGxhdGUgcmVmLCBkbyBub3RoaW5nLlxuICAgICAgICBpZiAoISh0aGlzLnRlbXBsYXRlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWYpKVxuICAgICAgICAgICAgcmV0dXJuO1xuXG4gICAgICAgIGNvbnN0IGVsID0gdGhpcy52aWV3Q29udGFpbmVyLmVsZW1lbnQubmF0aXZlRWxlbWVudDtcbiAgICAgICAgdGhpcy5kaWFsb2dJbnN0YW5jZSA9IGF3YWl0IG9wZW5Ub29sdGlwKHRoaXMuZGlhbG9nLCB0aGlzLnRlbXBsYXRlLCB0aGlzLmRhdGEsIGVsLCB0aGlzLmNvbmZpZyk7XG4gICAgfVxufVxuXG4vLyBIZWxwZXIgdG8gb3BlbiB0aGUgY29udGV4dCBtZW51IHdpdGhvdXQgdXNpbmcgdGhlIGRpcmVjdGl2ZS5cbmV4cG9ydCBjb25zdCBvcGVuVG9vbHRpcCA9IGFzeW5jIChcbiAgICBkaWFsb2c6IE1hdERpYWxvZyxcbiAgICB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IFR5cGU8YW55PixcbiAgICBkYXRhOiBhbnksXG4gICAgZWw6IEhUTUxFbGVtZW50LFxuICAgIGNvbmZpZz86IE5neFRvb2x0aXBPcHRpb25zXG4pID0+IHtcblxuICAgIGNvbnN0IHJlY3QgPSBhd2FpdCBjYWxjVG9vbHRpcEJvdW5kcyh0ZW1wbGF0ZSwgZGF0YSk7XG4gICAgY29uc3Qgb3duZXJDb3JkcyA9IGVsLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgIGNvbnN0IGNvcmRzID0gZ2V0UG9zaXRpb24oZWwsIGNvbmZpZywgcmVjdCk7XG4gICAgY29uc3Qgc3BlY2lmaWNJZCA9IGNyeXB0by5yYW5kb21VVUlEKCk7XG5cbiAgICByZXR1cm4gbmV3IFByb21pc2UocmVzID0+IHtcbiAgICAgICAgZGlhbG9nLm9wZW4oVG9vbHRpcENvbXBvbmVudCwge1xuICAgICAgICAgICAgZGF0YToge1xuICAgICAgICAgICAgICAgIGRhdGE6IGRhdGEsXG4gICAgICAgICAgICAgICAgdGVtcGxhdGU6IHRlbXBsYXRlLFxuICAgICAgICAgICAgICAgIGNvbmZpZzogY29uZmlnLFxuICAgICAgICAgICAgICAgIG93bmVyQ29yZHM6IG93bmVyQ29yZHMsXG4gICAgICAgICAgICAgICAgc2VsZkNvcmRzOiBjb3JkcyxcbiAgICAgICAgICAgICAgICBpZDogc3BlY2lmaWNJZFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIHBhbmVsQ2xhc3M6IFtcIm5neC10b29sdGlwXCIsICduZ3gtJyArIHNwZWNpZmljSWRdLmNvbmNhdChjb25maWc/LmN1c3RvbUNsYXNzIHx8IFtdKSxcbiAgICAgICAgICAgIHBvc2l0aW9uOiBjb3JkcyxcbiAgICAgICAgICAgIGhhc0JhY2tkcm9wOiBmYWxzZVxuICAgICAgICB9KVxuICAgICAgICAgICAgLmFmdGVyQ2xvc2VkKClcbiAgICAgICAgICAgIC5zdWJzY3JpYmUocyA9PiB7XG4gICAgICAgICAgICAgICAgcmVzKHMpO1xuICAgICAgICAgICAgfSlcbiAgICB9KSBhcyBQcm9taXNlPGFueT47XG59O1xuIl19