@dotglitch/ngx-common 1.0.20 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/menu/menu.component.d.ts +17 -8
- package/esm2020/components/menu/menu.component.mjs +59 -23
- package/fesm2015/dotglitch-ngx-common.mjs +62 -28
- package/fesm2015/dotglitch-ngx-common.mjs.map +1 -1
- package/fesm2020/dotglitch-ngx-common.mjs +57 -22
- package/fesm2020/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -412,6 +412,8 @@ const calcMenuItemBounds = (menuItems, dataObj) => __awaiter(void 0, void 0, voi
|
|
|
412
412
|
data: dataObj,
|
|
413
413
|
items: menuItems,
|
|
414
414
|
config: {},
|
|
415
|
+
selfCords: { left: "0px", top: "0px" },
|
|
416
|
+
ownerCords: { x: 0, y: 0, width: 0, height: 0 },
|
|
415
417
|
id: null
|
|
416
418
|
};
|
|
417
419
|
return calcComponentBounds(MenuComponent, data);
|
|
@@ -444,7 +446,6 @@ class TemplateWrapper {
|
|
|
444
446
|
this.viewContainer = viewContainer;
|
|
445
447
|
this.data = _data.data;
|
|
446
448
|
this.template = _data.template;
|
|
447
|
-
// TODO: This is probably invalid
|
|
448
449
|
this.templateType = this.template instanceof TemplateRef ? "template" : "component";
|
|
449
450
|
if (this.templateType == "component") {
|
|
450
451
|
this.componentPortal = new ComponentPortal(this.template);
|
|
@@ -487,25 +488,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
487
488
|
} });
|
|
488
489
|
class MenuComponent {
|
|
489
490
|
constructor(viewContainer, sanitizer, _data, dialog, // optional only for the purpose of estimating dimensions
|
|
490
|
-
dialogRef
|
|
491
|
-
var _a, _b, _c, _d, _e;
|
|
491
|
+
dialogRef) {
|
|
492
|
+
var _a, _b, _c, _d, _e, _f;
|
|
492
493
|
this.viewContainer = viewContainer;
|
|
493
494
|
this.sanitizer = sanitizer;
|
|
494
495
|
this._data = _data;
|
|
495
496
|
this.dialog = dialog;
|
|
496
497
|
this.dialogRef = dialogRef;
|
|
497
|
-
this.changeDetector = changeDetector;
|
|
498
498
|
this.closeSignal = new EventEmitter();
|
|
499
|
+
this.hasBootstrapped = false;
|
|
500
|
+
this.pointerIsOnVoid = false;
|
|
501
|
+
this.isLockedOpen = false;
|
|
502
|
+
this.coverRectCords = {
|
|
503
|
+
top: 0,
|
|
504
|
+
left: 0,
|
|
505
|
+
height: 0,
|
|
506
|
+
width: 0
|
|
507
|
+
};
|
|
499
508
|
// Check if there are any slashes or dots -- that will clearly exclude it from being a mat icon
|
|
500
509
|
this.matIconRx = /[\/\.]/i;
|
|
501
510
|
this.showIconColumn = true;
|
|
502
511
|
this.showShortcutColumn = true;
|
|
503
512
|
// Defaults are set before @Input() hooks evaluate
|
|
504
513
|
this.data = (_a = this._data) === null || _a === void 0 ? void 0 : _a.data;
|
|
505
|
-
this.
|
|
506
|
-
this.
|
|
507
|
-
this.
|
|
508
|
-
this.
|
|
514
|
+
this.ownerCords = (_b = this._data) === null || _b === void 0 ? void 0 : _b.ownerCords;
|
|
515
|
+
this.selfCords = (_c = this._data) === null || _c === void 0 ? void 0 : _c.selfCords;
|
|
516
|
+
this.items = (_d = this._data) === null || _d === void 0 ? void 0 : _d.items;
|
|
517
|
+
this.config = (_e = this._data) === null || _e === void 0 ? void 0 : _e.config;
|
|
518
|
+
this.id = (_f = this._data) === null || _f === void 0 ? void 0 : _f.id;
|
|
519
|
+
console.log(this.ownerCords);
|
|
509
520
|
}
|
|
510
521
|
ngOnInit() {
|
|
511
522
|
var _a, _b, _c;
|
|
@@ -551,16 +562,19 @@ class MenuComponent {
|
|
|
551
562
|
this.showShortcutColumn = !!((_c = this.items) === null || _c === void 0 ? void 0 : _c.find(i => typeof i == "object" &&
|
|
552
563
|
typeof i['shortcut'] == "string" &&
|
|
553
564
|
i['shortcut'].length > 2));
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
565
|
+
if (this.ownerCords) {
|
|
566
|
+
const selfY = parseInt(this.selfCords.top.replace('px', ''));
|
|
567
|
+
const selfX = parseInt(this.selfCords.left.replace('px', ''));
|
|
568
|
+
this.coverRectCords = {
|
|
569
|
+
top: this.ownerCords.y - selfY - 16,
|
|
570
|
+
left: this.ownerCords.x - selfX - 16,
|
|
571
|
+
height: this.ownerCords.height + 32,
|
|
572
|
+
width: this.ownerCords.width + 32
|
|
573
|
+
};
|
|
563
574
|
}
|
|
575
|
+
setTimeout(() => {
|
|
576
|
+
this.hasBootstrapped = true;
|
|
577
|
+
}, 200);
|
|
564
578
|
}
|
|
565
579
|
/**
|
|
566
580
|
*
|
|
@@ -569,7 +583,7 @@ class MenuComponent {
|
|
|
569
583
|
* @returns
|
|
570
584
|
*/
|
|
571
585
|
onMenuItemClick(item, row, hideBackdrop = false) {
|
|
572
|
-
var _a
|
|
586
|
+
var _a;
|
|
573
587
|
return __awaiter(this, void 0, void 0, function* () {
|
|
574
588
|
if (typeof item == 'string')
|
|
575
589
|
return null;
|
|
@@ -613,12 +627,13 @@ class MenuComponent {
|
|
|
613
627
|
const component = item.children ? MenuComponent : TemplateWrapper;
|
|
614
628
|
const dialogRef = this.dialog.open(component, {
|
|
615
629
|
position: cords,
|
|
616
|
-
panelClass: ["ngx-menu"
|
|
630
|
+
panelClass: ["ngx-menu"].concat(((_a = this.config) === null || _a === void 0 ? void 0 : _a.customClass) || []),
|
|
617
631
|
backdropClass: "ngx-menu-backdrop",
|
|
618
632
|
hasBackdrop: false,
|
|
619
633
|
data: {
|
|
620
634
|
data: this.data,
|
|
621
|
-
|
|
635
|
+
ownerCords: row.getBoundingClientRect(),
|
|
636
|
+
selfCords: cords,
|
|
622
637
|
items: item.children,
|
|
623
638
|
template: item.childTemplate,
|
|
624
639
|
config: this.config
|
|
@@ -627,7 +642,7 @@ class MenuComponent {
|
|
|
627
642
|
let _s = dialogRef
|
|
628
643
|
.afterClosed()
|
|
629
644
|
.subscribe((result) => {
|
|
630
|
-
if (result != -1) {
|
|
645
|
+
if (result !== null && result != -1) {
|
|
631
646
|
if (result && typeof item.action == 'function')
|
|
632
647
|
item.action(result);
|
|
633
648
|
this.close();
|
|
@@ -682,9 +697,25 @@ class MenuComponent {
|
|
|
682
697
|
target.style['margin-left'] = newLeft;
|
|
683
698
|
}
|
|
684
699
|
}
|
|
700
|
+
closeOnVoid(force = false) {
|
|
701
|
+
if (!this.isLockedOpen || force)
|
|
702
|
+
this.dialogRef.close(-1);
|
|
703
|
+
}
|
|
704
|
+
// If the void element gets stuck open, make wheel events pass through.
|
|
705
|
+
onWheel(evt) {
|
|
706
|
+
const el = this.viewContainer.element.nativeElement;
|
|
707
|
+
el.style.display = "none";
|
|
708
|
+
const target = document.elementFromPoint(evt.clientX, evt.clientY);
|
|
709
|
+
el.style.display = "block";
|
|
710
|
+
target.scroll({
|
|
711
|
+
top: evt.deltaY + target.scrollTop,
|
|
712
|
+
left: evt.deltaX + target.scrollLeft,
|
|
713
|
+
behavior: "smooth"
|
|
714
|
+
});
|
|
715
|
+
}
|
|
685
716
|
}
|
|
686
|
-
MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.DomSanitizer }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }
|
|
687
|
-
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, isStandalone: true, selector: "ngx-menu", inputs: { data: "data",
|
|
717
|
+
MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.DomSanitizer }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
718
|
+
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, isStandalone: true, selector: "ngx-menu", inputs: { data: "data", items: "items", config: "config", id: "id", ownerCords: "ownerCords", selfCords: "selfCords" }, outputs: { closeSignal: "closeSignal" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n (wheel)=\"onWheel($event)\"\n></div>\n\n<table>\n <tbody>\n <ng-container *ngFor=\"let item of items\">\n <ng-container>\n\n <!-- A row with a click action -->\n <tr #row\n *ngIf=\"item != 'separator' && item.separator != true && item['_visible']\"\n [class.disabled]=\"item['_disabled']\"\n (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n [class.hover]=\"item['children'] && row['hover']\"\n (pointerenter)=\"row['hover'] = true;\"\n (pointerleave)=\"row['hover'] = false\"\n >\n <!-- (item['children']?.length > 0 || item['childTemplate']) && onHover(item, row); closeOnLeave=true -->\n <td class=\"icon\" *ngIf=\"showIconColumn\">\n <img *ngIf=\"matIconRx.test(item.icon); else matIcon\" [src]=\"item.icon\" />\n <ng-template #matIcon>\n <mat-icon [fontIcon]=\"item.icon\"></mat-icon>\n </ng-template>\n </td>\n\n <!-- 'Normal' action based item -->\n <ng-container>\n <td class=\"label\"\n [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n >\n <a\n [attr.target]=\"item.linkTarget\"\n [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n >\n <ng-container\n *ngIf=\"$any(item.labelTemplate)?.prototype; else labelTemplate\"\n [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n [ngTemplateOutletContext]=\"{ '$implicit': data, 'dialog': dialogRef }\"\n />\n\n <ng-template #labelTemplate>\n <ng-container *ngIf=\"!$any(item)?.labelTemplate\">\n <div [innerHTML]=\"item['_formattedLabel']\"></div>\n </ng-container>\n <ng-container *ngIf=\"$any(item)?.labelTemplate\">\n {{$any(item)?.labelTemplate(data || {})}}\n </ng-container>\n </ng-template>\n </a>\n </td>\n </ng-container>\n\n <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n {{item.shortcutLabel}}\n </td>\n <td style=\"min-width: 16px\">\n <mat-icon *ngIf=\"\n (item.children && item.children.length > 0) ||\n item.childTemplate ||\n (item.childrenResolver && !item['_isResolving'])\n \"\n sytle=\"transform: translateY(2px)\"\n >\n chevron_right\n </mat-icon>\n\n <mat-progress-spinner *ngIf=\"item['_isResolving']\" mode=\"indeterminate\" [diameter]=\"20\" style=\"margin-right: 4px\"/>\n </td>\n </tr>\n\n <tr *ngIf=\"item != 'separator' && item.separator == true\" class=\"disabled separator\">\n <td class=\"center\" [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n <span class=\"hr\">\n {{item['label'] || ''}}\n </span>\n </td>\n </tr>\n <tr *ngIf=\"item == 'separator'\" class=\"disabled separator\">\n <td [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n <hr/>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n</table>\n\n<!-- <div *ngIf=\"true\" class=\"backdrop\"></div> -->\n<!-- <div\n *ngIf=\"parentCords && this.selfCords\"\n class=\"backdrop parent\"\n [style.top]=\"(parentCords.y - selfCords.y + 6) + 'px'\"\n [style.left]=\"(parentCords.x - selfCords.x + 12) + 'px'\"\n [style.width]=\"(parentCords.width) + 'px'\"\n [style.height]=\"(parentCords.height) + 'px'\"\n>\n</div> -->\n<!-- <ng-container *ngIf=\"parentCords && selfCords\">\n <div #top\n class=\"backdrop-outer\"\n [style.bottom]=\"(parentCords.y - selfCords.y)*-1 + parentCords.height + 'px'\"\n style=\"background: #f003;\"\n (pointerenter)=\"onLeave()\"\n ></div>\n <div #right\n class=\"backdrop-outer\"\n [style.left]=\"((parentCords.x - selfCords.x) + parentCords.width) + 'px'\"\n style=\"background: #0f03;\"\n (pointerenter)=\"onLeave()\"\n >\n <div>px: {{parentCords.x}}</div>\n <div>py: {{parentCords.y}}</div>\n <div>pw: {{parentCords.width}}</div>\n <div>ph: {{parentCords.height}}</div>\n <div>sx: {{selfCords.x}}</div>\n <div>sy: {{selfCords.y}}</div>\n <div>sw: {{selfCords.width}}</div>\n <div>sh: {{selfCords.height}}</div>\n </div>\n <div #bottom\n class=\"backdrop-outer\"\n [style.top]=\"((parentCords.y + parentCords.height - selfCords.y)) + 'px'\"\n style=\"background: #00f3;\"\n (pointerenter)=\"onLeave()\"\n ></div>\n <div #left\n class=\"backdrop-outer\"\n [style.right]=\"((parentCords.x - selfCords.x)*-1 + parentCords.width + 32) + 'px'\"\n style=\"background: #fff3;\"\n (pointerenter)=\"onLeave()\"\n ></div>\n</ng-container> -->\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:14px;cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled):hover{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled):hover a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
|
|
688
719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
|
|
689
720
|
type: Component,
|
|
690
721
|
args: [{ selector: 'ngx-menu', imports: [
|
|
@@ -692,8 +723,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
692
723
|
NgForOf,
|
|
693
724
|
NgTemplateOutlet,
|
|
694
725
|
MatIconModule,
|
|
695
|
-
MatProgressSpinnerModule
|
|
696
|
-
|
|
726
|
+
MatProgressSpinnerModule,
|
|
727
|
+
TooltipDirective
|
|
728
|
+
], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n (wheel)=\"onWheel($event)\"\n></div>\n\n<table>\n <tbody>\n <ng-container *ngFor=\"let item of items\">\n <ng-container>\n\n <!-- A row with a click action -->\n <tr #row\n *ngIf=\"item != 'separator' && item.separator != true && item['_visible']\"\n [class.disabled]=\"item['_disabled']\"\n (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n [class.hover]=\"item['children'] && row['hover']\"\n (pointerenter)=\"row['hover'] = true;\"\n (pointerleave)=\"row['hover'] = false\"\n >\n <!-- (item['children']?.length > 0 || item['childTemplate']) && onHover(item, row); closeOnLeave=true -->\n <td class=\"icon\" *ngIf=\"showIconColumn\">\n <img *ngIf=\"matIconRx.test(item.icon); else matIcon\" [src]=\"item.icon\" />\n <ng-template #matIcon>\n <mat-icon [fontIcon]=\"item.icon\"></mat-icon>\n </ng-template>\n </td>\n\n <!-- 'Normal' action based item -->\n <ng-container>\n <td class=\"label\"\n [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n >\n <a\n [attr.target]=\"item.linkTarget\"\n [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n >\n <ng-container\n *ngIf=\"$any(item.labelTemplate)?.prototype; else labelTemplate\"\n [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n [ngTemplateOutletContext]=\"{ '$implicit': data, 'dialog': dialogRef }\"\n />\n\n <ng-template #labelTemplate>\n <ng-container *ngIf=\"!$any(item)?.labelTemplate\">\n <div [innerHTML]=\"item['_formattedLabel']\"></div>\n </ng-container>\n <ng-container *ngIf=\"$any(item)?.labelTemplate\">\n {{$any(item)?.labelTemplate(data || {})}}\n </ng-container>\n </ng-template>\n </a>\n </td>\n </ng-container>\n\n <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n {{item.shortcutLabel}}\n </td>\n <td style=\"min-width: 16px\">\n <mat-icon *ngIf=\"\n (item.children && item.children.length > 0) ||\n item.childTemplate ||\n (item.childrenResolver && !item['_isResolving'])\n \"\n sytle=\"transform: translateY(2px)\"\n >\n chevron_right\n </mat-icon>\n\n <mat-progress-spinner *ngIf=\"item['_isResolving']\" mode=\"indeterminate\" [diameter]=\"20\" style=\"margin-right: 4px\"/>\n </td>\n </tr>\n\n <tr *ngIf=\"item != 'separator' && item.separator == true\" class=\"disabled separator\">\n <td class=\"center\" [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n <span class=\"hr\">\n {{item['label'] || ''}}\n </span>\n </td>\n </tr>\n <tr *ngIf=\"item == 'separator'\" class=\"disabled separator\">\n <td [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n <hr/>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n</table>\n\n<!-- <div *ngIf=\"true\" class=\"backdrop\"></div> -->\n<!-- <div\n *ngIf=\"parentCords && this.selfCords\"\n class=\"backdrop parent\"\n [style.top]=\"(parentCords.y - selfCords.y + 6) + 'px'\"\n [style.left]=\"(parentCords.x - selfCords.x + 12) + 'px'\"\n [style.width]=\"(parentCords.width) + 'px'\"\n [style.height]=\"(parentCords.height) + 'px'\"\n>\n</div> -->\n<!-- <ng-container *ngIf=\"parentCords && selfCords\">\n <div #top\n class=\"backdrop-outer\"\n [style.bottom]=\"(parentCords.y - selfCords.y)*-1 + parentCords.height + 'px'\"\n style=\"background: #f003;\"\n (pointerenter)=\"onLeave()\"\n ></div>\n <div #right\n class=\"backdrop-outer\"\n [style.left]=\"((parentCords.x - selfCords.x) + parentCords.width) + 'px'\"\n style=\"background: #0f03;\"\n (pointerenter)=\"onLeave()\"\n >\n <div>px: {{parentCords.x}}</div>\n <div>py: {{parentCords.y}}</div>\n <div>pw: {{parentCords.width}}</div>\n <div>ph: {{parentCords.height}}</div>\n <div>sx: {{selfCords.x}}</div>\n <div>sy: {{selfCords.y}}</div>\n <div>sw: {{selfCords.width}}</div>\n <div>sh: {{selfCords.height}}</div>\n </div>\n <div #bottom\n class=\"backdrop-outer\"\n [style.top]=\"((parentCords.y + parentCords.height - selfCords.y)) + 'px'\"\n style=\"background: #00f3;\"\n (pointerenter)=\"onLeave()\"\n ></div>\n <div #left\n class=\"backdrop-outer\"\n [style.right]=\"((parentCords.x - selfCords.x)*-1 + parentCords.width + 32) + 'px'\"\n style=\"background: #fff3;\"\n (pointerenter)=\"onLeave()\"\n ></div>\n</ng-container> -->\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:14px;cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled):hover{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled):hover a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"] }]
|
|
697
729
|
}], ctorParameters: function () {
|
|
698
730
|
return [{ type: i0.ViewContainerRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
|
|
699
731
|
type: Optional
|
|
@@ -704,17 +736,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
704
736
|
type: Optional
|
|
705
737
|
}] }, { type: i1.MatDialogRef, decorators: [{
|
|
706
738
|
type: Optional
|
|
707
|
-
}] }
|
|
739
|
+
}] }];
|
|
708
740
|
}, propDecorators: { data: [{
|
|
709
741
|
type: Input
|
|
710
|
-
}], parentCords: [{
|
|
711
|
-
type: Input
|
|
712
742
|
}], items: [{
|
|
713
743
|
type: Input
|
|
714
744
|
}], config: [{
|
|
715
745
|
type: Input
|
|
716
746
|
}], id: [{
|
|
717
747
|
type: Input
|
|
748
|
+
}], ownerCords: [{
|
|
749
|
+
type: Input
|
|
750
|
+
}], selfCords: [{
|
|
751
|
+
type: Input
|
|
718
752
|
}], closeSignal: [{
|
|
719
753
|
type: Output
|
|
720
754
|
}], onResize: [{
|