ngx-smart-spreadsheet
Version:
Lightweight spreadsheet module for Angular
64 lines • 11.8 kB
JavaScript
import { Component, ContentChildren, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
import { NgxContextMenuItemComponent } from './ngx-context-menu-item.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NgxContextMenuComponent {
constructor() {
this.closed = new EventEmitter();
this.target = -1;
}
show(ev, index) {
this.target = index;
this.menuElement.style.display = 'flex';
const menuTop = ((ev.clientY + this.menuHeight) > this.documentHeight) ?
ev.pageY - this.menuHeight : ev.pageY + 15;
const menuLeft = ((ev.clientX + this.menuWidth) > this.documentWidth) ?
ev.pageX - this.menuWidth : ev.pageX;
this.menuElement.style.top = `${menuTop}px`;
this.menuElement.style.left = `${menuLeft}px`;
}
click() {
this.menuElement.style.display = 'none';
this.closed.emit();
}
get menuElement() {
return this.menuElementRef.nativeElement;
}
get menuStyle() {
return getComputedStyle(this.menuElement);
}
get menuWidth() {
return this.menuElement.offsetWidth +
parseInt(this.menuStyle.marginLeft) + parseInt(this.menuStyle.marginRight) +
parseInt(this.menuStyle.paddingLeft) + parseInt(this.menuStyle.paddingRight);
}
get menuHeight() {
return this.menuElement.offsetHeight +
parseInt(this.menuStyle.marginTop) + parseInt(this.menuStyle.marginBottom) +
parseInt(this.menuStyle.paddingTop) + parseInt(this.menuStyle.paddingBottom);
}
get documentWidth() {
return document.documentElement.clientWidth;
}
get documentHeight() {
return document.documentElement.clientHeight;
}
}
NgxContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NgxContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: NgxContextMenuComponent, selector: "ngx-context-menu", outputs: { closed: "closed" }, host: { listeners: { "document:click": "click($event)" } }, queries: [{ propertyName: "itemTemplates", predicate: NgxContextMenuItemComponent }], viewQueries: [{ propertyName: "menuElementRef", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<div #menu class=\"menu\">\n <ng-container *ngFor=\"let item of itemTemplates\">\n <div class=\"item\" *ngIf=\"!item.divider; else divider\" (click)=\"item.clicked(target)\"\n [class.disabled]=\"item.disabled\">\n {{item.label}}\n </div>\n <ng-template #divider>\n <div class=\"divider\"></div>\n </ng-template>\n </ng-container>\n</div>", styles: [".menu{position:absolute;background-color:#fff;-webkit-user-select:none;user-select:none;min-width:16rem;box-shadow:0 .5rem .8rem #0000001a;z-index:9;display:none;flex-direction:column;padding:.5em 0;border-radius:4px}.menu .item{cursor:pointer;padding:.5em 1em}.menu .item:hover:not(.disabled){background:#f0f0f0}.menu .item.disabled{opacity:.5;cursor:default}.menu .divider{width:100%;margin-top:.5em;padding-top:.5em;border-top:1px solid #ddd}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NgxContextMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-context-menu', template: "<div #menu class=\"menu\">\n <ng-container *ngFor=\"let item of itemTemplates\">\n <div class=\"item\" *ngIf=\"!item.divider; else divider\" (click)=\"item.clicked(target)\"\n [class.disabled]=\"item.disabled\">\n {{item.label}}\n </div>\n <ng-template #divider>\n <div class=\"divider\"></div>\n </ng-template>\n </ng-container>\n</div>", styles: [".menu{position:absolute;background-color:#fff;-webkit-user-select:none;user-select:none;min-width:16rem;box-shadow:0 .5rem .8rem #0000001a;z-index:9;display:none;flex-direction:column;padding:.5em 0;border-radius:4px}.menu .item{cursor:pointer;padding:.5em 1em}.menu .item:hover:not(.disabled){background:#f0f0f0}.menu .item.disabled{opacity:.5;cursor:default}.menu .divider{width:100%;margin-top:.5em;padding-top:.5em;border-top:1px solid #ddd}\n"] }]
}], propDecorators: { menuElementRef: [{
type: ViewChild,
args: ['menu', { static: true }]
}], itemTemplates: [{
type: ContentChildren,
args: [NgxContextMenuItemComponent]
}], closed: [{
type: Output
}], click: [{
type: HostListener,
args: ['document:click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbnRleHQtbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc21hcnQtc3ByZWFkc2hlZXQvc3JjL2xpYi9uZ3gtY29udGV4dC1tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zbWFydC1zcHJlYWRzaGVldC9zcmMvbGliL25neC1jb250ZXh0LW1lbnUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQWMsWUFBWSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQWEsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pJLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDOzs7QUFPaEYsTUFBTSxPQUFPLHVCQUF1QjtJQUxwQztRQWFFLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTVCLFdBQU0sR0FBVyxDQUFDLENBQUMsQ0FBQztLQWdEckI7SUE5Q1EsSUFBSSxDQUFDLEVBQWMsRUFBRSxLQUFhO1FBQ3ZDLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7UUFFeEMsTUFBTSxPQUFPLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDO1lBQ3RFLEVBQUUsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDN0MsTUFBTSxRQUFRLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDO1lBQ3JFLEVBQUUsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQztRQUN2QyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsR0FBRyxPQUFPLElBQUksQ0FBQztRQUM1QyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsR0FBRyxRQUFRLElBQUksQ0FBQztJQUNoRCxDQUFDO0lBR0QsS0FBSztRQUNILElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7UUFDeEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsSUFBWSxXQUFXO1FBQ3JCLE9BQU8sSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUM7SUFDM0MsQ0FBQztJQUVELElBQVksU0FBUztRQUNuQixPQUFPLGdCQUFnQixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRUQsSUFBWSxTQUFTO1FBQ25CLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXO1lBQ2pDLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQztZQUMxRSxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUNqRixDQUFDO0lBRUQsSUFBWSxVQUFVO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxZQUFZO1lBQ2xDLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQztZQUMxRSxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNqRixDQUFDO0lBRUQsSUFBWSxhQUFhO1FBQ3ZCLE9BQU8sUUFBUSxDQUFDLGVBQWUsQ0FBQyxXQUFXLENBQUM7SUFDOUMsQ0FBQztJQUVELElBQVksY0FBYztRQUN4QixPQUFPLFFBQVEsQ0FBQyxlQUFlLENBQUMsWUFBWSxDQUFDO0lBQy9DLENBQUM7O29IQXhEVSx1QkFBdUI7d0dBQXZCLHVCQUF1QixpTEFJakIsMkJBQTJCLG1KQ1o5QyxzWkFVTTsyRkRGTyx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0Usa0JBQWtCOzhCQU01QixjQUFjO3NCQURiLFNBQVM7dUJBQUMsTUFBTSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFJbkMsYUFBYTtzQkFEWixlQUFlO3VCQUFDLDJCQUEyQjtnQkFJNUMsTUFBTTtzQkFETCxNQUFNO2dCQWtCUCxLQUFLO3NCQURKLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZHJlbiwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIE91dHB1dCwgUXVlcnlMaXN0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5neENvbnRleHRNZW51SXRlbUNvbXBvbmVudCB9IGZyb20gJy4vbmd4LWNvbnRleHQtbWVudS1pdGVtLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1jb250ZXh0LW1lbnUnLFxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LWNvbnRleHQtbWVudS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC1jb250ZXh0LW1lbnUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hDb250ZXh0TWVudUNvbXBvbmVudCB7XG4gIEBWaWV3Q2hpbGQoJ21lbnUnLCB7IHN0YXRpYzogdHJ1ZSB9KVxuICBtZW51RWxlbWVudFJlZiE6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+O1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oTmd4Q29udGV4dE1lbnVJdGVtQ29tcG9uZW50KVxuICBpdGVtVGVtcGxhdGVzITogUXVlcnlMaXN0PE5neENvbnRleHRNZW51SXRlbUNvbXBvbmVudD47XG5cbiAgQE91dHB1dCgpXG4gIGNsb3NlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICB0YXJnZXQ6IG51bWJlciA9IC0xO1xuXG4gIHB1YmxpYyBzaG93KGV2OiBNb3VzZUV2ZW50LCBpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgdGhpcy50YXJnZXQgPSBpbmRleDtcbiAgICB0aGlzLm1lbnVFbGVtZW50LnN0eWxlLmRpc3BsYXkgPSAnZmxleCc7XG5cbiAgICBjb25zdCBtZW51VG9wID0gKChldi5jbGllbnRZICsgdGhpcy5tZW51SGVpZ2h0KSA+IHRoaXMuZG9jdW1lbnRIZWlnaHQpID9cbiAgICAgIGV2LnBhZ2VZIC0gdGhpcy5tZW51SGVpZ2h0IDogZXYucGFnZVkgKyAxNTtcbiAgICBjb25zdCBtZW51TGVmdCA9ICgoZXYuY2xpZW50WCArIHRoaXMubWVudVdpZHRoKSA+IHRoaXMuZG9jdW1lbnRXaWR0aCkgP1xuICAgICAgZXYucGFnZVggLSB0aGlzLm1lbnVXaWR0aCA6IGV2LnBhZ2VYO1xuICAgIHRoaXMubWVudUVsZW1lbnQuc3R5bGUudG9wID0gYCR7bWVudVRvcH1weGA7XG4gICAgdGhpcy5tZW51RWxlbWVudC5zdHlsZS5sZWZ0ID0gYCR7bWVudUxlZnR9cHhgO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudCddKVxuICBjbGljaygpOiB2b2lkIHtcbiAgICB0aGlzLm1lbnVFbGVtZW50LnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7XG4gICAgdGhpcy5jbG9zZWQuZW1pdCgpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXQgbWVudUVsZW1lbnQoKTogSFRNTEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLm1lbnVFbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBwcml2YXRlIGdldCBtZW51U3R5bGUoKTogQ1NTU3R5bGVEZWNsYXJhdGlvbiB7XG4gICAgcmV0dXJuIGdldENvbXB1dGVkU3R5bGUodGhpcy5tZW51RWxlbWVudCk7XG4gIH1cblxuICBwcml2YXRlIGdldCBtZW51V2lkdGgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5tZW51RWxlbWVudC5vZmZzZXRXaWR0aCArXG4gICAgICBwYXJzZUludCh0aGlzLm1lbnVTdHlsZS5tYXJnaW5MZWZ0KSArIHBhcnNlSW50KHRoaXMubWVudVN0eWxlLm1hcmdpblJpZ2h0KSArXG4gICAgICBwYXJzZUludCh0aGlzLm1lbnVTdHlsZS5wYWRkaW5nTGVmdCkgKyBwYXJzZUludCh0aGlzLm1lbnVTdHlsZS5wYWRkaW5nUmlnaHQpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXQgbWVudUhlaWdodCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLm1lbnVFbGVtZW50Lm9mZnNldEhlaWdodCArXG4gICAgICBwYXJzZUludCh0aGlzLm1lbnVTdHlsZS5tYXJnaW5Ub3ApICsgcGFyc2VJbnQodGhpcy5tZW51U3R5bGUubWFyZ2luQm90dG9tKSArXG4gICAgICBwYXJzZUludCh0aGlzLm1lbnVTdHlsZS5wYWRkaW5nVG9wKSArIHBhcnNlSW50KHRoaXMubWVudVN0eWxlLnBhZGRpbmdCb3R0b20pO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXQgZG9jdW1lbnRXaWR0aCgpOiBudW1iZXIge1xuICAgIHJldHVybiBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50V2lkdGg7XG4gIH1cblxuICBwcml2YXRlIGdldCBkb2N1bWVudEhlaWdodCgpOiBudW1iZXIge1xuICAgIHJldHVybiBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50SGVpZ2h0O1xuICB9XG5cbn1cbiIsIjxkaXYgI21lbnUgY2xhc3M9XCJtZW51XCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtVGVtcGxhdGVzXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpdGVtXCIgKm5nSWY9XCIhaXRlbS5kaXZpZGVyOyBlbHNlIGRpdmlkZXJcIiAoY2xpY2spPVwiaXRlbS5jbGlja2VkKHRhcmdldClcIlxuICAgICAgICAgICAgW2NsYXNzLmRpc2FibGVkXT1cIml0ZW0uZGlzYWJsZWRcIj5cbiAgICAgICAgICAgIHt7aXRlbS5sYWJlbH19XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bmctdGVtcGxhdGUgI2RpdmlkZXI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGl2aWRlclwiPjwvZGl2PlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbmctY29udGFpbmVyPlxuPC9kaXY+Il19