@dotglitch/ngx-common 1.0.37 → 1.0.39
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 +3 -1
- package/directives/menu.directive.d.ts +1 -1
- package/esm2020/components/menu/menu.component.mjs +31 -12
- package/esm2020/components/tooltip/tooltip.component.mjs +4 -3
- package/esm2020/directives/menu.directive.mjs +2 -1
- package/esm2020/directives/tooltip.directive.mjs +2 -1
- package/esm2020/services/theme.service.mjs +2 -3
- package/esm2020/types/menu.mjs +1 -1
- package/fesm2015/dotglitch-ngx-common.mjs +48 -27
- package/fesm2015/dotglitch-ngx-common.mjs.map +1 -1
- package/fesm2020/dotglitch-ngx-common.mjs +36 -15
- package/fesm2020/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
- package/types/menu.d.ts +16 -11
|
@@ -208,6 +208,7 @@ class TooltipComponent {
|
|
|
208
208
|
// Defaults are set before @Input() hooks evaluate
|
|
209
209
|
this.data = this.data || this._data?.data || {};
|
|
210
210
|
this.config = this.config || this._data?.config;
|
|
211
|
+
this.dialog = this.dialog || this._data?.dialog;
|
|
211
212
|
this.template = this.template || this._data?.template;
|
|
212
213
|
this.ownerCords = this.ownerCords || this._data?.ownerCords;
|
|
213
214
|
this.selfCords = this.selfCords || this._data?.selfCords;
|
|
@@ -248,7 +249,7 @@ class TooltipComponent {
|
|
|
248
249
|
}
|
|
249
250
|
}
|
|
250
251
|
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ViewContainerRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
251
|
-
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onClose()" } }, 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></div>\n\n<div class=\"container\">\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{
|
|
252
|
+
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onClose()" } }, 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></div>\n\n<div #container class=\"container\">\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
252
253
|
// NgIf,
|
|
253
254
|
// NgTemplateOutlet,
|
|
254
255
|
// NgComponentOutlet,
|
|
@@ -260,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
260
261
|
// NgTemplateOutlet,
|
|
261
262
|
// NgComponentOutlet,
|
|
262
263
|
CommonModule,
|
|
263
|
-
], 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></div>\n\n<div class=\"container\">\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{
|
|
264
|
+
], 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></div>\n\n<div #container class=\"container\">\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
|
|
264
265
|
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
|
|
265
266
|
type: Optional
|
|
266
267
|
}, {
|
|
@@ -402,6 +403,7 @@ const openTooltip = async (dialog, template, data, el, config, focusTrap = false
|
|
|
402
403
|
autoFocus: focusTrap,
|
|
403
404
|
restoreFocus: focusTrap,
|
|
404
405
|
data: {
|
|
406
|
+
dialog,
|
|
405
407
|
data: data,
|
|
406
408
|
template: template,
|
|
407
409
|
config: config,
|
|
@@ -475,12 +477,15 @@ class MenuComponent {
|
|
|
475
477
|
this.showShortcutColumn = true;
|
|
476
478
|
this.childDialogs = [];
|
|
477
479
|
// Defaults are set before @Input() hooks evaluate
|
|
480
|
+
this.dialog = this.dialog || this._data?.dialog;
|
|
478
481
|
this.data = this._data?.data;
|
|
479
482
|
this.ownerCords = this._data?.ownerCords;
|
|
480
483
|
this.selfCords = this._data?.selfCords;
|
|
481
484
|
this.items = this._data?.items;
|
|
482
485
|
this.config = this._data?.config;
|
|
483
486
|
this.id = this._data?.id;
|
|
487
|
+
this.parentItem = this._data?.parentItem;
|
|
488
|
+
this.parentContext = this._data?.parentContext;
|
|
484
489
|
this.template = _data.template;
|
|
485
490
|
this.templateType = this.template instanceof TemplateRef ? "template" : "component";
|
|
486
491
|
if (this.templateType == "component") {
|
|
@@ -494,6 +499,7 @@ class MenuComponent {
|
|
|
494
499
|
// Set defaults
|
|
495
500
|
i['_disabled'] = false;
|
|
496
501
|
i['_visible'] = true;
|
|
502
|
+
i['_context'] = typeof i.context == "function" ? i.context(this.data) : i.context;
|
|
497
503
|
if (i.label)
|
|
498
504
|
try {
|
|
499
505
|
i['_formattedLabel'] = this.formatLabel(i.label);
|
|
@@ -503,21 +509,21 @@ class MenuComponent {
|
|
|
503
509
|
}
|
|
504
510
|
if (typeof i.isDisabled == "function")
|
|
505
511
|
try {
|
|
506
|
-
i['_disabled'] = i.isDisabled(this.data || {});
|
|
512
|
+
i['_disabled'] = i.isDisabled(this.data || {}, i['_context']);
|
|
507
513
|
}
|
|
508
514
|
catch (e) {
|
|
509
515
|
console.warn(e);
|
|
510
516
|
}
|
|
511
517
|
if (typeof i.isVisible == "function")
|
|
512
518
|
try {
|
|
513
|
-
i['_visible'] = i.isVisible(this.data || {});
|
|
519
|
+
i['_visible'] = i.isVisible(this.data || {}, i['_context']);
|
|
514
520
|
}
|
|
515
521
|
catch (e) {
|
|
516
522
|
console.warn(e);
|
|
517
523
|
}
|
|
518
524
|
if (typeof i.linkTemplate == "function")
|
|
519
525
|
try {
|
|
520
|
-
i['_link'] = i.linkTemplate(this.data || {});
|
|
526
|
+
i['_link'] = i.linkTemplate(this.data || {}, i['_context']);
|
|
521
527
|
}
|
|
522
528
|
catch (e) {
|
|
523
529
|
console.warn(e);
|
|
@@ -555,16 +561,25 @@ class MenuComponent {
|
|
|
555
561
|
return null;
|
|
556
562
|
if (item.separator)
|
|
557
563
|
return null;
|
|
564
|
+
const context = await item['_context'];
|
|
558
565
|
// If cache is enabled, only load if we don't have any children.
|
|
559
566
|
const forceLoad = (item.cacheResolvedChildren ? !item.children : true);
|
|
560
567
|
if (item.childrenResolver && forceLoad) {
|
|
561
568
|
item['_isResolving'] = true;
|
|
562
|
-
item
|
|
569
|
+
item['_children'] = await item.childrenResolver(this.data, context);
|
|
563
570
|
item['_isResolving'] = false;
|
|
564
571
|
}
|
|
572
|
+
else if (typeof item.children == "function" && forceLoad) {
|
|
573
|
+
item['_isResolving'] = true;
|
|
574
|
+
item['_children'] = await item.children(this.data, context);
|
|
575
|
+
item['_isResolving'] = false;
|
|
576
|
+
}
|
|
577
|
+
else {
|
|
578
|
+
item['_children'] = item.children;
|
|
579
|
+
}
|
|
565
580
|
if (!item.childTemplate && !item.children) {
|
|
566
581
|
if (item.action) {
|
|
567
|
-
item.action(this.data);
|
|
582
|
+
item.action(this.data, context);
|
|
568
583
|
this.close();
|
|
569
584
|
}
|
|
570
585
|
// If no action, this is simply a text item.
|
|
@@ -581,7 +596,7 @@ class MenuComponent {
|
|
|
581
596
|
// Set position coordinates
|
|
582
597
|
const { width, height } = await (item.childTemplate
|
|
583
598
|
? calcComponentBounds(MenuComponent, { template: item.childTemplate })
|
|
584
|
-
: calcMenuItemBounds(item
|
|
599
|
+
: calcMenuItemBounds(item['_children'], this.data));
|
|
585
600
|
if (bounds.y + height > window.innerHeight)
|
|
586
601
|
cords.bottom = "0px";
|
|
587
602
|
if (bounds.x + bounds.width + width > window.innerWidth)
|
|
@@ -590,7 +605,7 @@ class MenuComponent {
|
|
|
590
605
|
cords.top = bounds.y + "px";
|
|
591
606
|
if (!cords.left)
|
|
592
607
|
cords.left = bounds.x + bounds.width + "px";
|
|
593
|
-
const component = item
|
|
608
|
+
const component = item['_children'] ? MenuComponent : MenuComponent;
|
|
594
609
|
const dialogRef = this.dialog.open(component, {
|
|
595
610
|
position: cords,
|
|
596
611
|
panelClass: ["ngx-menu"].concat(this.config?.customClass || []),
|
|
@@ -600,7 +615,9 @@ class MenuComponent {
|
|
|
600
615
|
data: this.data,
|
|
601
616
|
ownerCords: row.getBoundingClientRect(),
|
|
602
617
|
selfCords: cords,
|
|
603
|
-
|
|
618
|
+
parentItem: item,
|
|
619
|
+
parentContext: item['_context'],
|
|
620
|
+
items: item['_children'],
|
|
604
621
|
template: item.childTemplate,
|
|
605
622
|
config: this.config
|
|
606
623
|
}
|
|
@@ -610,7 +627,7 @@ class MenuComponent {
|
|
|
610
627
|
.subscribe((result) => {
|
|
611
628
|
if (result !== null && result != -1) {
|
|
612
629
|
if (result && typeof item.action == 'function')
|
|
613
|
-
item.action(result);
|
|
630
|
+
item.action(result, context);
|
|
614
631
|
this.close();
|
|
615
632
|
}
|
|
616
633
|
else {
|
|
@@ -682,7 +699,7 @@ class MenuComponent {
|
|
|
682
699
|
}
|
|
683
700
|
}
|
|
684
701
|
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 });
|
|
685
|
-
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 *ngIf=\"!template\">\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
|
|
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", ownerCords: "ownerCords", selfCords: "selfCords", parentItem: "parentItem", parentContext: "parentContext" }, 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 *ngIf=\"!template\">\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\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 </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 [ngTemplateOutletInjector]=\"\"\n />\n </ng-container>\n <ng-template #portalOutlet [cdkPortalOutlet]=\"componentPortal\"></ng-template>\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"] }] });
|
|
686
703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
|
|
687
704
|
type: Component,
|
|
688
705
|
args: [{ selector: 'ngx-menu', imports: [
|
|
@@ -693,7 +710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
693
710
|
MatIconModule,
|
|
694
711
|
MatProgressSpinnerModule,
|
|
695
712
|
TooltipDirective
|
|
696
|
-
], 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 <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
|
|
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 <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\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 </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 [ngTemplateOutletInjector]=\"\"\n />\n </ng-container>\n <ng-template #portalOutlet [cdkPortalOutlet]=\"componentPortal\"></ng-template>\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
714
|
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
|
|
698
715
|
type: Optional
|
|
699
716
|
}, {
|
|
@@ -715,6 +732,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
715
732
|
type: Input
|
|
716
733
|
}], selfCords: [{
|
|
717
734
|
type: Input
|
|
735
|
+
}], parentItem: [{
|
|
736
|
+
type: Input
|
|
737
|
+
}], parentContext: [{
|
|
738
|
+
type: Input
|
|
718
739
|
}], closeSignal: [{
|
|
719
740
|
type: Output
|
|
720
741
|
}], onResize: [{
|
|
@@ -827,6 +848,7 @@ const openMenu = async (dialog, menuItems, data, evt, config = {}, el) => {
|
|
|
827
848
|
return new Promise(res => {
|
|
828
849
|
dialog.open(MenuComponent, {
|
|
829
850
|
data: {
|
|
851
|
+
dialog,
|
|
830
852
|
data: data,
|
|
831
853
|
items: menuItems,
|
|
832
854
|
config: config,
|
|
@@ -1940,10 +1962,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1940
1962
|
}]
|
|
1941
1963
|
}], ctorParameters: function () { return [{ type: Fetch }]; } });
|
|
1942
1964
|
|
|
1943
|
-
const isLightMode = document.body.classList.contains("light");
|
|
1944
1965
|
class ThemeService extends BehaviorSubject {
|
|
1945
1966
|
constructor() {
|
|
1946
|
-
super(
|
|
1967
|
+
super(document.body.classList.contains("light") ? "light" : "dark");
|
|
1947
1968
|
this.subscribe(t => {
|
|
1948
1969
|
if (!t || t == 'undefined')
|
|
1949
1970
|
return;
|