@dotglitch/ngx-common 1.0.39 → 1.0.40
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,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directive,
|
|
2
|
+
import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directive, Pipe, Injectable, InjectionToken, EventEmitter, isDevMode, ViewContainerRef, ViewChild, Output, NgModule, ViewEncapsulation, SecurityContext, ContentChild, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/dialog';
|
|
4
4
|
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
|
|
5
5
|
import * as i2 from '@angular/common';
|
|
@@ -453,6 +453,8 @@ const calcComponentBounds = async (component, data) => {
|
|
|
453
453
|
del.remove();
|
|
454
454
|
return rect;
|
|
455
455
|
};
|
|
456
|
+
const $data = Symbol("data");
|
|
457
|
+
const $hover = Symbol("hover");
|
|
456
458
|
class MenuComponent {
|
|
457
459
|
constructor(viewContainer, sanitizer, _data, dialog, // optional only for the purpose of estimating dimensions
|
|
458
460
|
dialogRef) {
|
|
@@ -461,7 +463,9 @@ class MenuComponent {
|
|
|
461
463
|
this._data = _data;
|
|
462
464
|
this.dialog = dialog;
|
|
463
465
|
this.dialogRef = dialogRef;
|
|
464
|
-
this.
|
|
466
|
+
this.overlayOverlap = 32;
|
|
467
|
+
this.hoverDelay = 300;
|
|
468
|
+
this.showDebugOverlay = false;
|
|
465
469
|
this.hasBootstrapped = false;
|
|
466
470
|
this.pointerIsOnVoid = false;
|
|
467
471
|
this.isLockedOpen = false;
|
|
@@ -499,7 +503,9 @@ class MenuComponent {
|
|
|
499
503
|
// Set defaults
|
|
500
504
|
i['_disabled'] = false;
|
|
501
505
|
i['_visible'] = true;
|
|
502
|
-
i['_context'] = typeof i.context == "function"
|
|
506
|
+
i['_context'] = (typeof i.context == "function")
|
|
507
|
+
? i.context(this.data)
|
|
508
|
+
: i.context;
|
|
503
509
|
if (i.label)
|
|
504
510
|
try {
|
|
505
511
|
i['_formattedLabel'] = this.formatLabel(i.label);
|
|
@@ -540,23 +546,39 @@ class MenuComponent {
|
|
|
540
546
|
const selfY = parseInt(this.selfCords.top?.replace('px', '') || '0');
|
|
541
547
|
const selfX = parseInt(this.selfCords.left?.replace('px', '') || '0');
|
|
542
548
|
this.coverRectCords = {
|
|
543
|
-
top: this.ownerCords.y - selfY -
|
|
544
|
-
left: this.ownerCords.x - selfX -
|
|
545
|
-
height: this.ownerCords.height +
|
|
546
|
-
width: this.ownerCords.width +
|
|
549
|
+
top: this.ownerCords.y - selfY - (this.overlayOverlap / 2),
|
|
550
|
+
left: this.ownerCords.x - selfX - (this.overlayOverlap / 2),
|
|
551
|
+
height: this.ownerCords.height + this.overlayOverlap,
|
|
552
|
+
width: this.ownerCords.width + this.overlayOverlap
|
|
547
553
|
};
|
|
548
554
|
}
|
|
549
555
|
setTimeout(() => {
|
|
550
556
|
this.hasBootstrapped = true;
|
|
551
557
|
}, 200);
|
|
552
558
|
}
|
|
559
|
+
ngAfterViewInit() {
|
|
560
|
+
const el = this.viewContainer.element.nativeElement;
|
|
561
|
+
el.addEventListener("keydown", evt => {
|
|
562
|
+
this.isLockedOpen = true;
|
|
563
|
+
});
|
|
564
|
+
el.addEventListener("pointerdown", evt => {
|
|
565
|
+
this.isLockedOpen = true;
|
|
566
|
+
});
|
|
567
|
+
el.addEventListener("touch", evt => {
|
|
568
|
+
this.isLockedOpen = true;
|
|
569
|
+
});
|
|
570
|
+
}
|
|
571
|
+
ngOnDestroy() {
|
|
572
|
+
//
|
|
573
|
+
this.childDialogs.forEach(d => d.close({ [$data]: true }));
|
|
574
|
+
}
|
|
553
575
|
/**
|
|
554
576
|
*
|
|
555
577
|
* @param item
|
|
556
578
|
* @param evt
|
|
557
579
|
* @returns
|
|
558
580
|
*/
|
|
559
|
-
async onMenuItemClick(item, row
|
|
581
|
+
async onMenuItemClick(item, row) {
|
|
560
582
|
if (typeof item == 'string')
|
|
561
583
|
return null;
|
|
562
584
|
if (item.separator)
|
|
@@ -578,9 +600,10 @@ class MenuComponent {
|
|
|
578
600
|
item['_children'] = item.children;
|
|
579
601
|
}
|
|
580
602
|
if (!item.childTemplate && !item.children) {
|
|
581
|
-
if (item.action) {
|
|
582
|
-
item.action(this.data, context);
|
|
583
|
-
this.close();
|
|
603
|
+
if (typeof item.action == "function") {
|
|
604
|
+
const res = await item.action(this.data, context);
|
|
605
|
+
this.close(res);
|
|
606
|
+
return res;
|
|
584
607
|
}
|
|
585
608
|
// If no action, this is simply a text item.
|
|
586
609
|
return null;
|
|
@@ -605,8 +628,7 @@ class MenuComponent {
|
|
|
605
628
|
cords.top = bounds.y + "px";
|
|
606
629
|
if (!cords.left)
|
|
607
630
|
cords.left = bounds.x + bounds.width + "px";
|
|
608
|
-
const
|
|
609
|
-
const dialogRef = this.dialog.open(component, {
|
|
631
|
+
const dialogRef = this.dialog.open(MenuComponent, {
|
|
610
632
|
position: cords,
|
|
611
633
|
panelClass: ["ngx-menu"].concat(this.config?.customClass || []),
|
|
612
634
|
backdropClass: "ngx-menu-backdrop",
|
|
@@ -616,7 +638,7 @@ class MenuComponent {
|
|
|
616
638
|
ownerCords: row.getBoundingClientRect(),
|
|
617
639
|
selfCords: cords,
|
|
618
640
|
parentItem: item,
|
|
619
|
-
parentContext:
|
|
641
|
+
parentContext: context,
|
|
620
642
|
items: item['_children'],
|
|
621
643
|
template: item.childTemplate,
|
|
622
644
|
config: this.config
|
|
@@ -624,16 +646,26 @@ class MenuComponent {
|
|
|
624
646
|
});
|
|
625
647
|
let _s = dialogRef
|
|
626
648
|
.afterClosed()
|
|
627
|
-
.subscribe((result) => {
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
this.close();
|
|
649
|
+
.subscribe(async (result) => {
|
|
650
|
+
// Clicked "void" on a submenu
|
|
651
|
+
if (typeof result == "object" && result[$data] == true) {
|
|
652
|
+
this.close(result);
|
|
632
653
|
}
|
|
633
|
-
|
|
634
|
-
|
|
654
|
+
// Went back to parent menu -- do not close (same as result == null)
|
|
655
|
+
else if (typeof result == "object" && result[$data] == false) {
|
|
656
|
+
}
|
|
657
|
+
// Got some other result value
|
|
658
|
+
else if (result != null) {
|
|
659
|
+
// Perform action callback
|
|
660
|
+
if (typeof item.action == 'function') {
|
|
661
|
+
this.close(await item.action(result, context));
|
|
662
|
+
}
|
|
663
|
+
// Just close.
|
|
664
|
+
else {
|
|
665
|
+
this.close();
|
|
666
|
+
}
|
|
635
667
|
}
|
|
636
|
-
this.childDialogs.splice(this.childDialogs.
|
|
668
|
+
this.childDialogs.splice(this.childDialogs.indexOf(dialogRef), 1);
|
|
637
669
|
_s.unsubscribe();
|
|
638
670
|
});
|
|
639
671
|
this.childDialogs.push(dialogRef);
|
|
@@ -653,14 +685,26 @@ class MenuComponent {
|
|
|
653
685
|
// @HostListener("window:resize", ['event'])
|
|
654
686
|
// @HostListener("window:blur", ['event'])
|
|
655
687
|
close(result) {
|
|
656
|
-
if (result != -1)
|
|
657
|
-
this.closeSignal.emit();
|
|
658
688
|
this.childDialogs.forEach(d => d.close());
|
|
659
689
|
this.dialogRef?.close(result);
|
|
660
690
|
}
|
|
661
691
|
closeOnVoid(force = false) {
|
|
662
|
-
if (!this.isLockedOpen || force)
|
|
663
|
-
this.close(
|
|
692
|
+
if (!this.isLockedOpen || force) {
|
|
693
|
+
this.close({ [$data]: force });
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
startHoverTimer(item, row) {
|
|
697
|
+
item[$hover] = setTimeout(() => {
|
|
698
|
+
delete item[$hover];
|
|
699
|
+
if (item.children || item.childTemplate || item.childrenResolver) {
|
|
700
|
+
row['hover'] = true;
|
|
701
|
+
this.onMenuItemClick(item, row);
|
|
702
|
+
}
|
|
703
|
+
}, this.hoverDelay);
|
|
704
|
+
}
|
|
705
|
+
stopHoverTimer(item) {
|
|
706
|
+
item[$hover] && clearTimeout(item[$hover]);
|
|
707
|
+
delete item[$hover];
|
|
664
708
|
}
|
|
665
709
|
/**
|
|
666
710
|
* Check if the dialog is clipping offscreen
|
|
@@ -699,7 +743,7 @@ class MenuComponent {
|
|
|
699
743
|
}
|
|
700
744
|
}
|
|
701
745
|
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 });
|
|
702
|
-
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",
|
|
746
|
+
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"] }] });
|
|
703
747
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
|
|
704
748
|
type: Component,
|
|
705
749
|
args: [{ selector: 'ngx-menu', imports: [
|
|
@@ -710,7 +754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
710
754
|
MatIconModule,
|
|
711
755
|
MatProgressSpinnerModule,
|
|
712
756
|
TooltipDirective
|
|
713
|
-
], 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
|
|
757
|
+
], 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"] }]
|
|
714
758
|
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
|
|
715
759
|
type: Optional
|
|
716
760
|
}, {
|
|
@@ -728,6 +772,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
728
772
|
type: Input
|
|
729
773
|
}], id: [{
|
|
730
774
|
type: Input
|
|
775
|
+
}], overlayOverlap: [{
|
|
776
|
+
type: Input
|
|
777
|
+
}], hoverDelay: [{
|
|
778
|
+
type: Input
|
|
779
|
+
}], showDebugOverlay: [{
|
|
780
|
+
type: Input
|
|
731
781
|
}], ownerCords: [{
|
|
732
782
|
type: Input
|
|
733
783
|
}], selfCords: [{
|
|
@@ -736,8 +786,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
736
786
|
type: Input
|
|
737
787
|
}], parentContext: [{
|
|
738
788
|
type: Input
|
|
739
|
-
}], closeSignal: [{
|
|
740
|
-
type: Output
|
|
741
789
|
}], onResize: [{
|
|
742
790
|
type: HostListener,
|
|
743
791
|
args: ["window:resize"]
|