@dotglitch/ngx-common 1.0.39 → 1.0.41
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 +10 -4
- package/esm2020/components/menu/menu.component.mjs +79 -31
- package/fesm2015/dotglitch-ngx-common.mjs +79 -31
- package/fesm2015/dotglitch-ngx-common.mjs.map +1 -1
- package/fesm2020/dotglitch-ngx-common.mjs +78 -30
- package/fesm2020/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __awaiter } from 'tslib';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directive,
|
|
3
|
+
import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directive, Pipe, Injectable, InjectionToken, EventEmitter, isDevMode, ViewContainerRef, ViewChild, Output, NgModule, ViewEncapsulation, SecurityContext, ContentChild, ViewChildren } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/material/dialog';
|
|
5
5
|
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
|
|
6
6
|
import * as i2 from '@angular/common';
|
|
@@ -465,6 +465,8 @@ const calcComponentBounds = (component, data) => __awaiter(void 0, void 0, void
|
|
|
465
465
|
del.remove();
|
|
466
466
|
return rect;
|
|
467
467
|
});
|
|
468
|
+
const $data = Symbol("data");
|
|
469
|
+
const $hover = Symbol("hover");
|
|
468
470
|
class MenuComponent {
|
|
469
471
|
constructor(viewContainer, sanitizer, _data, dialog, // optional only for the purpose of estimating dimensions
|
|
470
472
|
dialogRef) {
|
|
@@ -474,7 +476,9 @@ class MenuComponent {
|
|
|
474
476
|
this._data = _data;
|
|
475
477
|
this.dialog = dialog;
|
|
476
478
|
this.dialogRef = dialogRef;
|
|
477
|
-
this.
|
|
479
|
+
this.overlayOverlap = 32;
|
|
480
|
+
this.hoverDelay = 300;
|
|
481
|
+
this.showDebugOverlay = false;
|
|
478
482
|
this.hasBootstrapped = false;
|
|
479
483
|
this.pointerIsOnVoid = false;
|
|
480
484
|
this.isLockedOpen = false;
|
|
@@ -513,7 +517,9 @@ class MenuComponent {
|
|
|
513
517
|
// Set defaults
|
|
514
518
|
i['_disabled'] = false;
|
|
515
519
|
i['_visible'] = true;
|
|
516
|
-
i['_context'] = typeof i.context == "function"
|
|
520
|
+
i['_context'] = (typeof i.context == "function")
|
|
521
|
+
? i.context(this.data)
|
|
522
|
+
: i.context;
|
|
517
523
|
if (i.label)
|
|
518
524
|
try {
|
|
519
525
|
i['_formattedLabel'] = this.formatLabel(i.label);
|
|
@@ -554,23 +560,39 @@ class MenuComponent {
|
|
|
554
560
|
const selfY = parseInt(((_d = this.selfCords.top) === null || _d === void 0 ? void 0 : _d.replace('px', '')) || '0');
|
|
555
561
|
const selfX = parseInt(((_e = this.selfCords.left) === null || _e === void 0 ? void 0 : _e.replace('px', '')) || '0');
|
|
556
562
|
this.coverRectCords = {
|
|
557
|
-
top: this.ownerCords.y - selfY -
|
|
558
|
-
left: this.ownerCords.x - selfX -
|
|
559
|
-
height: this.ownerCords.height +
|
|
560
|
-
width: this.ownerCords.width +
|
|
563
|
+
top: this.ownerCords.y - selfY - (this.overlayOverlap / 2),
|
|
564
|
+
left: this.ownerCords.x - selfX - (this.overlayOverlap / 2),
|
|
565
|
+
height: this.ownerCords.height + this.overlayOverlap,
|
|
566
|
+
width: this.ownerCords.width + this.overlayOverlap
|
|
561
567
|
};
|
|
562
568
|
}
|
|
563
569
|
setTimeout(() => {
|
|
564
570
|
this.hasBootstrapped = true;
|
|
565
571
|
}, 200);
|
|
566
572
|
}
|
|
573
|
+
ngAfterViewInit() {
|
|
574
|
+
const el = this.viewContainer.element.nativeElement;
|
|
575
|
+
el.addEventListener("keydown", evt => {
|
|
576
|
+
this.isLockedOpen = true;
|
|
577
|
+
});
|
|
578
|
+
el.addEventListener("pointerdown", evt => {
|
|
579
|
+
this.isLockedOpen = true;
|
|
580
|
+
});
|
|
581
|
+
el.addEventListener("touch", evt => {
|
|
582
|
+
this.isLockedOpen = true;
|
|
583
|
+
});
|
|
584
|
+
}
|
|
585
|
+
ngOnDestroy() {
|
|
586
|
+
//
|
|
587
|
+
this.childDialogs.forEach(d => d.close({ [$data]: true }));
|
|
588
|
+
}
|
|
567
589
|
/**
|
|
568
590
|
*
|
|
569
591
|
* @param item
|
|
570
592
|
* @param evt
|
|
571
593
|
* @returns
|
|
572
594
|
*/
|
|
573
|
-
onMenuItemClick(item, row
|
|
595
|
+
onMenuItemClick(item, row) {
|
|
574
596
|
var _a;
|
|
575
597
|
return __awaiter(this, void 0, void 0, function* () {
|
|
576
598
|
if (typeof item == 'string')
|
|
@@ -594,9 +616,10 @@ class MenuComponent {
|
|
|
594
616
|
item['_children'] = item.children;
|
|
595
617
|
}
|
|
596
618
|
if (!item.childTemplate && !item.children) {
|
|
597
|
-
if (item.action) {
|
|
598
|
-
item.action(this.data, context);
|
|
599
|
-
this.close();
|
|
619
|
+
if (typeof item.action == "function") {
|
|
620
|
+
const res = yield item.action(this.data, context);
|
|
621
|
+
this.close(res);
|
|
622
|
+
return res;
|
|
600
623
|
}
|
|
601
624
|
// If no action, this is simply a text item.
|
|
602
625
|
return null;
|
|
@@ -621,8 +644,7 @@ class MenuComponent {
|
|
|
621
644
|
cords.top = bounds.y + "px";
|
|
622
645
|
if (!cords.left)
|
|
623
646
|
cords.left = bounds.x + bounds.width + "px";
|
|
624
|
-
const
|
|
625
|
-
const dialogRef = this.dialog.open(component, {
|
|
647
|
+
const dialogRef = this.dialog.open(MenuComponent, {
|
|
626
648
|
position: cords,
|
|
627
649
|
panelClass: ["ngx-menu"].concat(((_a = this.config) === null || _a === void 0 ? void 0 : _a.customClass) || []),
|
|
628
650
|
backdropClass: "ngx-menu-backdrop",
|
|
@@ -632,7 +654,7 @@ class MenuComponent {
|
|
|
632
654
|
ownerCords: row.getBoundingClientRect(),
|
|
633
655
|
selfCords: cords,
|
|
634
656
|
parentItem: item,
|
|
635
|
-
parentContext:
|
|
657
|
+
parentContext: context,
|
|
636
658
|
items: item['_children'],
|
|
637
659
|
template: item.childTemplate,
|
|
638
660
|
config: this.config
|
|
@@ -640,18 +662,28 @@ class MenuComponent {
|
|
|
640
662
|
});
|
|
641
663
|
let _s = dialogRef
|
|
642
664
|
.afterClosed()
|
|
643
|
-
.subscribe((result) => {
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
this.close();
|
|
665
|
+
.subscribe((result) => __awaiter(this, void 0, void 0, function* () {
|
|
666
|
+
// Clicked "void" on a submenu
|
|
667
|
+
if (typeof result == "object" && result[$data] == true) {
|
|
668
|
+
this.close(result);
|
|
648
669
|
}
|
|
649
|
-
|
|
650
|
-
|
|
670
|
+
// Went back to parent menu -- do not close (same as result == null)
|
|
671
|
+
else if (typeof result == "object" && result[$data] == false) {
|
|
651
672
|
}
|
|
652
|
-
|
|
673
|
+
// Got some other result value
|
|
674
|
+
else if (result != null) {
|
|
675
|
+
// Perform action callback
|
|
676
|
+
if (typeof item.action == 'function') {
|
|
677
|
+
this.close(yield item.action(result, context));
|
|
678
|
+
}
|
|
679
|
+
// Just close.
|
|
680
|
+
else {
|
|
681
|
+
this.close();
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
this.childDialogs.splice(this.childDialogs.indexOf(dialogRef), 1);
|
|
653
685
|
_s.unsubscribe();
|
|
654
|
-
});
|
|
686
|
+
}));
|
|
655
687
|
this.childDialogs.push(dialogRef);
|
|
656
688
|
return dialogRef;
|
|
657
689
|
});
|
|
@@ -671,14 +703,26 @@ class MenuComponent {
|
|
|
671
703
|
// @HostListener("window:blur", ['event'])
|
|
672
704
|
close(result) {
|
|
673
705
|
var _a;
|
|
674
|
-
if (result != -1)
|
|
675
|
-
this.closeSignal.emit();
|
|
676
706
|
this.childDialogs.forEach(d => d.close());
|
|
677
707
|
(_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close(result);
|
|
678
708
|
}
|
|
679
709
|
closeOnVoid(force = false) {
|
|
680
|
-
if (!this.isLockedOpen || force)
|
|
681
|
-
this.close(
|
|
710
|
+
if (!this.isLockedOpen || force) {
|
|
711
|
+
this.close({ [$data]: force });
|
|
712
|
+
}
|
|
713
|
+
}
|
|
714
|
+
startHoverTimer(item, row) {
|
|
715
|
+
if (!item.children && !item.childTemplate && !item.childrenResolver)
|
|
716
|
+
return;
|
|
717
|
+
item[$hover] = setTimeout(() => {
|
|
718
|
+
delete item[$hover];
|
|
719
|
+
row['hover'] = true;
|
|
720
|
+
this.onMenuItemClick(item, row);
|
|
721
|
+
}, this.hoverDelay);
|
|
722
|
+
}
|
|
723
|
+
stopHoverTimer(item) {
|
|
724
|
+
item[$hover] && clearTimeout(item[$hover]);
|
|
725
|
+
delete item[$hover];
|
|
682
726
|
}
|
|
683
727
|
/**
|
|
684
728
|
* Check if the dialog is clipping offscreen
|
|
@@ -718,7 +762,7 @@ class MenuComponent {
|
|
|
718
762
|
}
|
|
719
763
|
}
|
|
720
764
|
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 });
|
|
721
|
-
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",
|
|
765
|
+
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", overlayOverlap: "overlayOverlap", hoverDelay: "hoverDelay", showDebugOverlay: "showDebugOverlay", ownerCords: "ownerCords", selfCords: "selfCords", parentItem: "parentItem", parentContext: "parentContext" }, 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.background]=\"showDebugOverlay ? '#f004' : '#0000'\"\n style=\"z-index: -1\"\n></div>\n\n<div class=\"void\"\n [style.background]=\"showDebugOverlay ? '#00f4' : '#0000'\"\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 *ngIf=\"!template\">\n <tbody>\n <ng-container *ngFor=\"let item of items\">\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; startHoverTimer(item, row)\"\n (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n >\n\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\" [style.color]=\"item.iconColor\"></mat-icon>\n </ng-template>\n </td>\n\n <!-- 'Normal' action based item -->\n <td class=\"label\"\n [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n >\n <a\n #anchor\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 simpleLabel\"\n [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'context': item['_context'],\n 'item': item,\n 'element': anchor,\n 'menu': this\n }\"\n />\n\n <ng-template #simpleLabel>\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\n <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n {{item.shortcutLabel}}\n </td>\n <td style=\"min-width: 16px\">\n <mat-icon *ngIf=\"(\n (item['children']?.length > 0) ||\n (item['_children']?.length > 0) ||\n item.childTemplate ||\n item.children?.['call'] ||\n item.childrenResolver\n ) &&\n !item['_isResolving']\n \"\n style=\"transform: translateY(2px)\"\n >\n chevron_right\n </mat-icon>\n\n <mat-progress-spinner\n *ngIf=\"item['_isResolving']\"\n mode=\"indeterminate\"\n [diameter]=\"20\"\n style=\"margin-right: 4px\"\n />\n </td>\n </tr>\n\n <!-- Separator with label -->\n <tr\n *ngIf=\"item != 'separator' && item.separator == true\"\n class=\"disabled separator\"\n >\n <td\n class=\"center\"\n [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n >\n <span class=\"hr\">\n {{item['label'] || ''}}\n </span>\n </td>\n </tr>\n\n <!-- Separator -->\n <tr\n *ngIf=\"item == 'separator'\"\n class=\"disabled separator\"\n >\n <td\n [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n >\n <hr/>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n\n<ng-container *ngIf=\"template\">\n <ng-container *ngIf=\"templateType == 'template'; else portalOutlet\">\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'context': parentContext,\n 'item': parentItem,\n 'element': this.viewContainer?.element?.nativeElement,\n 'menu': this\n }\"\n />\n </ng-container>\n <ng-template\n #portalOutlet\n [cdkPortalOutlet]=\"componentPortal\"\n />\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: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
|
|
722
766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
|
|
723
767
|
type: Component,
|
|
724
768
|
args: [{ selector: 'ngx-menu', imports: [
|
|
@@ -729,7 +773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
729
773
|
MatIconModule,
|
|
730
774
|
MatProgressSpinnerModule,
|
|
731
775
|
TooltipDirective
|
|
732
|
-
], 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 *ngIf=\"!template\">\n <tbody>\n <ng-container *ngFor=\"let item of items\">\n
|
|
776
|
+
], 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.background]=\"showDebugOverlay ? '#f004' : '#0000'\"\n style=\"z-index: -1\"\n></div>\n\n<div class=\"void\"\n [style.background]=\"showDebugOverlay ? '#00f4' : '#0000'\"\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 *ngIf=\"!template\">\n <tbody>\n <ng-container *ngFor=\"let item of items\">\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; startHoverTimer(item, row)\"\n (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n >\n\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\" [style.color]=\"item.iconColor\"></mat-icon>\n </ng-template>\n </td>\n\n <!-- 'Normal' action based item -->\n <td class=\"label\"\n [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n >\n <a\n #anchor\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 simpleLabel\"\n [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'context': item['_context'],\n 'item': item,\n 'element': anchor,\n 'menu': this\n }\"\n />\n\n <ng-template #simpleLabel>\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\n <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n {{item.shortcutLabel}}\n </td>\n <td style=\"min-width: 16px\">\n <mat-icon *ngIf=\"(\n (item['children']?.length > 0) ||\n (item['_children']?.length > 0) ||\n item.childTemplate ||\n item.children?.['call'] ||\n item.childrenResolver\n ) &&\n !item['_isResolving']\n \"\n style=\"transform: translateY(2px)\"\n >\n chevron_right\n </mat-icon>\n\n <mat-progress-spinner\n *ngIf=\"item['_isResolving']\"\n mode=\"indeterminate\"\n [diameter]=\"20\"\n style=\"margin-right: 4px\"\n />\n </td>\n </tr>\n\n <!-- Separator with label -->\n <tr\n *ngIf=\"item != 'separator' && item.separator == true\"\n class=\"disabled separator\"\n >\n <td\n class=\"center\"\n [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n >\n <span class=\"hr\">\n {{item['label'] || ''}}\n </span>\n </td>\n </tr>\n\n <!-- Separator -->\n <tr\n *ngIf=\"item == 'separator'\"\n class=\"disabled separator\"\n >\n <td\n [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n >\n <hr/>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n\n<ng-container *ngIf=\"template\">\n <ng-container *ngIf=\"templateType == 'template'; else portalOutlet\">\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'context': parentContext,\n 'item': parentItem,\n 'element': this.viewContainer?.element?.nativeElement,\n 'menu': this\n }\"\n />\n </ng-container>\n <ng-template\n #portalOutlet\n [cdkPortalOutlet]=\"componentPortal\"\n />\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"] }]
|
|
733
777
|
}], ctorParameters: function () {
|
|
734
778
|
return [{ type: i0.ViewContainerRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
|
|
735
779
|
type: Optional
|
|
@@ -749,6 +793,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
749
793
|
type: Input
|
|
750
794
|
}], id: [{
|
|
751
795
|
type: Input
|
|
796
|
+
}], overlayOverlap: [{
|
|
797
|
+
type: Input
|
|
798
|
+
}], hoverDelay: [{
|
|
799
|
+
type: Input
|
|
800
|
+
}], showDebugOverlay: [{
|
|
801
|
+
type: Input
|
|
752
802
|
}], ownerCords: [{
|
|
753
803
|
type: Input
|
|
754
804
|
}], selfCords: [{
|
|
@@ -757,8 +807,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
757
807
|
type: Input
|
|
758
808
|
}], parentContext: [{
|
|
759
809
|
type: Input
|
|
760
|
-
}], closeSignal: [{
|
|
761
|
-
type: Output
|
|
762
810
|
}], onResize: [{
|
|
763
811
|
type: HostListener,
|
|
764
812
|
args: ["window:resize"]
|