@dotglitch/ngx-common 1.1.17 → 1.1.18
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 +1 -1
- package/directives/menu.directive.d.ts +1 -1
- package/esm2022/components/menu/menu.component.mjs +9 -6
- package/esm2022/directives/menu.directive.mjs +24 -26
- package/esm2022/directives/tooltip.directive.mjs +21 -25
- package/fesm2022/dotglitch-ngx-common.mjs +49 -54
- package/fesm2022/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
|
|
|
3
3
|
import { getPosition } from './utils';
|
|
4
4
|
import { TooltipComponent, calcTooltipBounds } from '../components/tooltip/tooltip.component';
|
|
5
5
|
import { ulid } from 'ulidx';
|
|
6
|
+
import { firstValueFrom } from 'rxjs';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
import * as i1 from "@angular/material/dialog";
|
|
8
9
|
export class TooltipDirective {
|
|
@@ -92,29 +93,24 @@ export const openTooltip = async (dialog, template, data, el, config, focusTrap
|
|
|
92
93
|
const ownerCords = el.getBoundingClientRect();
|
|
93
94
|
const cords = getPosition(el, config, rect);
|
|
94
95
|
const specificId = ulid();
|
|
95
|
-
return
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
.afterClosed()
|
|
115
|
-
.subscribe(s => {
|
|
116
|
-
res(s);
|
|
117
|
-
});
|
|
118
|
-
});
|
|
96
|
+
return firstValueFrom(dialog.open(TooltipComponent, {
|
|
97
|
+
autoFocus: focusTrap,
|
|
98
|
+
restoreFocus: focusTrap,
|
|
99
|
+
data: {
|
|
100
|
+
dialog,
|
|
101
|
+
data: data,
|
|
102
|
+
template: template,
|
|
103
|
+
config: config,
|
|
104
|
+
matPopupOptions,
|
|
105
|
+
ownerCords: ownerCords,
|
|
106
|
+
selfCords: cords,
|
|
107
|
+
id: specificId
|
|
108
|
+
},
|
|
109
|
+
panelClass: ["ngx-tooltip", 'ngx-' + specificId].concat(config?.customClass || []),
|
|
110
|
+
position: cords,
|
|
111
|
+
hasBackdrop: false,
|
|
112
|
+
...matPopupOptions
|
|
113
|
+
})
|
|
114
|
+
.afterClosed());
|
|
119
115
|
};
|
|
120
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
116
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21tb24vc3JjL2RpcmVjdGl2ZXMvdG9vbHRpcC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBMEIsTUFBTSxlQUFlLENBQUM7QUFDcEcsT0FBTyxFQUFFLFNBQVMsRUFBaUMsTUFBTSwwQkFBMEIsQ0FBQztBQUNwRixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBRTlGLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDN0IsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLE1BQU0sQ0FBQzs7O0FBU3RDLE1BQU0sT0FBTyxnQkFBZ0I7SUFtQnpCLFlBQ1ksTUFBaUIsRUFDakIsYUFBK0I7UUFEL0IsV0FBTSxHQUFOLE1BQU0sQ0FBVztRQUNqQixrQkFBYSxHQUFiLGFBQWEsQ0FBa0I7UUFmM0M7O1dBRUc7UUFDMEIsV0FBTSxHQUFtQixFQUFFLENBQUM7UUFFekQ7O1dBRUc7UUFDMkIsU0FBSSxHQUFRLEVBQUUsQ0FBQztRQUVyQyx1QkFBa0IsR0FBRyxLQUFLLENBQUM7UUFDM0IsaUJBQVksR0FBRyxLQUFLLENBQUM7SUFNN0IsQ0FBQztJQUVELGVBQWU7UUFDWCxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxhQUE0QixDQUFDO1FBRW5FLElBQUksQ0FBQyxNQUFNLEVBQUUsUUFBUSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUMvQixFQUFFLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxFQUFFLEdBQUcsRUFBRTtnQkFDeEIsSUFBSSxD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QU8sY0FBYyxDQUNqQixNQUFNLENBQUMsSUFBSSxDQUFDLGdCQUFnQixFQUFFO1FBQzFCLFNBQVMsRUFBRSxTQUFTO1FBQ3BCLFlBQVksRUFBRSxTQUFTO1FBQ3ZCLElBQUksRUFBRTtZQUNGLE1BQU07WUFDTixJQUFJLEVBQUUsSUFBSTtZQUNWLFFBQVEsRUFBRSxRQUFRO1lBQ2xCLE1BQU0sRUFBRSxNQUFNO1lBQ2QsZUFBZTtZQUNmLFVBQVUsRUFBRSxVQUFVO1lBQ3RCLFNBQVMsRUFBRSxLQUFLO1lBQ2hCLEVBQUUsRUFBRSxVQUFVO1NBQ2pCO1FBQ0QsVUFBVSxFQUFFLENBQUMsYUFBYSxFQUFFLE1BQU0sR0FBRyxVQUFVLENBQUMsQ0FBQyxNQUFNLENBQUMsTUFBTSxFQUFFLFdBQVcsSUFBSSxFQUFFLENBQUM7UUFDbEYsUUFBUSxFQUFFLEtBQUs7UUFDZixXQUFXLEVBQUUsS0FBSztRQUNsQixHQUFHLGVBQWU7S0FDckIsQ0FBQztTQUNELFdBQVcsRUFBRSxDQUNqQixDQUFDO0FBQ04sQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBJbnB1dCwgSG9zdExpc3RlbmVyLCBUZW1wbGF0ZVJlZiwgVHlwZSwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RGlhbG9nLCBNYXREaWFsb2dDb25maWcsIE1hdERpYWxvZ1JlZiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RpYWxvZyc7XG5pbXBvcnQgeyBnZXRQb3NpdGlvbiB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgVG9vbHRpcENvbXBvbmVudCwgY2FsY1Rvb2x0aXBCb3VuZHMgfSBmcm9tICcuLi9jb21wb25lbnRzL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQnO1xuaW1wb3J0IHsgVG9vbHRpcE9wdGlvbnMgfSBmcm9tICcuLi90eXBlcy90b29sdGlwJztcbmltcG9ydCB7IHVsaWQgfSBmcm9tICd1bGlkeCc7XG5pbXBvcnQgeyBmaXJzdFZhbHVlRnJvbSB9IGZyb20gJ3J4anMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1tuZ3gtdG9vbHRpcF0nLFxuICAgIHByb3ZpZGVyczogW1xuICAgICAgICBNYXREaWFsb2dcbiAgICBdLFxuICAgIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgVG9vbHRpcERpcmVjdGl2ZSB7XG5cbiAgICAvKipcbiAgICAgKi9cbiAgICBASW5wdXQoXCJuZ3gtdG9vbHRpcFwiKSB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IFR5cGU8YW55PjtcblxuICAgIC8qKlxuICAgICAqIENvbmZpZ3VyYXRpb24gZm9yIG9wZW5pbmcgdGhlIGFwcCBtZW51XG4gICAgICovXG4gICAgQElucHV0KFwibmd4LXRvb2x0aXAtY29uZmlnXCIpIGNvbmZpZzogVG9vbHRpcE9wdGlvbnMgPSB7fTtcblxuICAgIC8qKlxuICAgICAqIEFyYml0cmFyeSBkYXRhIHRvIHBhc3MgaW50byB0aGUgdGVtcGxhdGVcbiAgICAgKi9cbiAgICBASW5wdXQoXCJuZ3gtdG9vbHRpcC1jb250ZXh0XCIpIGRhdGE6IGFueSA9IHt9O1xuXG4gICAgcHJpdmF0ZSBpc0N1cnNvck92ZXJUYXJnZXQgPSBmYWxzZTtcbiAgICBwcml2YXRlIGRpYWxvZ0lzT3BlbiA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgZGlhbG9nOiBNYXREaWFsb2csXG4gICAgICAgIHByaXZhdGUgdmlld0NvbnRhaW5lcjogVmlld0NvbnRhaW5lclJlZlxuICAgICkge1xuICAgIH1cblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICAgICAgY29uc3QgZWwgPSB0aGlzLnZpZXdDb250YWluZXIuZWxlbWVudC5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50O1xuXG4gICAgICAgIHRoaXMuY29uZmlnPy50cmlnZ2Vycz8uZm9yRWFjaCh0ID0+IHtcbiAgICAgICAgICAgIGVsLmFkZEV2ZW50TGlzdGVuZXIodCwgKCkgPT4ge1xuICAgICAgICAgICAgICAgIGlmICh0ID09IFwiY2xpY2tcIilcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5jb25maWcuc3RheU9wZW4gPSB0cnVlO1xuXG4gICAgICAgICAgICAgICAgdGhpcy5vcGVuKCk7XG4gICAgICAgICAgICB9KVxuICAgICAgICB9KVxuICAgIH1cblxuICAgIGFzeW5jIG9wZW4oKSB7XG4gICAgICAgIGlmICghdGhpcy5kaWFsb2dJc09wZW4pIHtcbiAgICAgICAgICAgIGNvbnN0IGVsID0gdGhpcy52aWV3Q29udGFpbmVyLmVsZW1lbnQubmF0aXZlRWxlbWVudDtcbiAgICAgICAgICAgIHRoaXMuZGlhbG9nSXNPcGVuID0gdHJ1ZTtcbiAgICAgICAgICAgIGF3YWl0IG9wZW5Ub29sdGlwKHRoaXMuZGlhbG9nLCB0aGlzLnRlbXBsYXRlLCB0aGlzLmRhdGEsIGVsLCB0aGlzLmNvbmZpZyk7XG4gICAgICAgICAgICB0aGlzLmRpYWxvZ0lzT3BlbiA9IGZhbHNlO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcigncG9pbnRlcmVudGVyJywgWyckZXZlbnQnXSlcbiAgICBwdWJsaWMgYXN5bmMgb25Qb2ludGVyRW50ZXIoZXZ0OiBQb2ludGVyRXZlbnQpIHtcbiAgICAgICAgLy8gSWYgdGhlIHRlbXBsYXRlIGlzIG5vdCBhIHRlbXBsYXRlIHJlZiwgZG8gbm90aGluZy5cbiAgICAgICAgaWYgKCEodGhpcy50ZW1wbGF0ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmKSlcbiAgICAgICAgICAgIHJldHVybjtcblxuICAgICAgICBpZiAoQXJyYXkuaXNBcnJheSh0aGlzLmNvbmZpZz8udHJpZ2dlcnMpICYmICF0aGlzLmNvbmZpZy50cmlnZ2Vycy5pbmNsdWRlcyhcImhvdmVyXCIpKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmlzQ3Vyc29yT3ZlclRhcmdldCA9IHRydWU7XG5cbiAgICAgICAgc2V0VGltZW91dChhc3luYyAoKSA9PiB7XG4gICAgICAgICAgICAvLyBJZiB0aGUgY3Vyc29yIG1vdmVkIGF3YXkgaW4gdGhlIHRpbWVcbiAgICAgICAgICAgIGlmICghdGhpcy5pc0N1cnNvck92ZXJUYXJnZXQpXG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuXG4gICAgICAgICAgICB0aGlzLm9wZW4oKTtcbiAgICAgICAgfSwgdGhpcy5jb25maWcuZGVsYXkgPz8gMjUwKTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdwb2ludGVybGVhdmUnLCBbJyRldmVudCddKVxuICAgIHB1YmxpYyBhc3luYyBvblBvaW50ZXJMZWF2ZShldnQ6IFBvaW50ZXJFdmVudCkge1xuICAgICAgICB0aGlzLmlzQ3Vyc29yT3ZlclRhcmdldCA9IGZhbHNlO1xuICAgIH1cbn1cblxuLy8gSGVscGVyIHRvIG9wZW4gdGhlIGNvbnRleHQgbWVudSB3aXRob3V0IHVzaW5nIHRoZSBkaXJlY3RpdmUuXG5leHBvcnQgY29uc3Qgb3BlblRvb2x0aXAgPSBhc3luYyAoXG4gICAgZGlhbG9nOiBNYXREaWFsb2csXG4gICAgdGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT4gfCBUeXBlPGFueT4sXG4gICAgZGF0YTogYW55LFxuICAgIGVsOiBIVE1MRWxlbWVudCxcbiAgICBjb25maWc/OiBUb29sdGlwT3B0aW9ucyxcbiAgICBmb2N1c1RyYXAgPSBmYWxzZSxcbiAgICBtYXRQb3B1cE9wdGlvbnM/OiBNYXREaWFsb2dDb25maWc8YW55PlxuKSA9PiB7XG5cbiAgICBjb25zdCByZWN0ID0gYXdhaXQgY2FsY1Rvb2x0aXBCb3VuZHModGVtcGxhdGUsIGRhdGEsIG1hdFBvcHVwT3B0aW9ucyk7XG4gICAgY29uc3Qgb3duZXJDb3JkcyA9IGVsLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgIGNvbnN0IGNvcmRzID0gZ2V0UG9zaXRpb24oZWwsIGNvbmZpZywgcmVjdCk7XG4gICAgY29uc3Qgc3BlY2lmaWNJZCA9IHVsaWQoKTtcblxuICAgIHJldHVybiBmaXJzdFZhbHVlRnJvbShcbiAgICAgICAgZGlhbG9nLm9wZW4oVG9vbHRpcENvbXBvbmVudCwge1xuICAgICAgICAgICAgYXV0b0ZvY3VzOiBmb2N1c1RyYXAsXG4gICAgICAgICAgICByZXN0b3JlRm9jdXM6IGZvY3VzVHJhcCxcbiAgICAgICAgICAgIGRhdGE6IHtcbiAgICAgICAgICAgICAgICBkaWFsb2csXG4gICAgICAgICAgICAgICAgZGF0YTogZGF0YSxcbiAgICAgICAgICAgICAgICB0ZW1wbGF0ZTogdGVtcGxhdGUsXG4gICAgICAgICAgICAgICAgY29uZmlnOiBjb25maWcsXG4gICAgICAgICAgICAgICAgbWF0UG9wdXBPcHRpb25zLFxuICAgICAgICAgICAgICAgIG93bmVyQ29yZHM6IG93bmVyQ29yZHMsXG4gICAgICAgICAgICAgICAgc2VsZkNvcmRzOiBjb3JkcyxcbiAgICAgICAgICAgICAgICBpZDogc3BlY2lmaWNJZFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIHBhbmVsQ2xhc3M6IFtcIm5neC10b29sdGlwXCIsICduZ3gtJyArIHNwZWNpZmljSWRdLmNvbmNhdChjb25maWc/LmN1c3RvbUNsYXNzIHx8IFtdKSxcbiAgICAgICAgICAgIHBvc2l0aW9uOiBjb3JkcyxcbiAgICAgICAgICAgIGhhc0JhY2tkcm9wOiBmYWxzZSxcbiAgICAgICAgICAgIC4uLm1hdFBvcHVwT3B0aW9uc1xuICAgICAgICB9KVxuICAgICAgICAuYWZ0ZXJDbG9zZWQoKVxuICAgICk7XG59O1xuIl19
|
|
@@ -440,30 +440,25 @@ const openTooltip = async (dialog, template, data, el, config, focusTrap = false
|
|
|
440
440
|
const ownerCords = el.getBoundingClientRect();
|
|
441
441
|
const cords = getPosition(el, config, rect);
|
|
442
442
|
const specificId = ulid();
|
|
443
|
-
return
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
.afterClosed()
|
|
463
|
-
.subscribe(s => {
|
|
464
|
-
res(s);
|
|
465
|
-
});
|
|
466
|
-
});
|
|
443
|
+
return firstValueFrom(dialog.open(TooltipComponent, {
|
|
444
|
+
autoFocus: focusTrap,
|
|
445
|
+
restoreFocus: focusTrap,
|
|
446
|
+
data: {
|
|
447
|
+
dialog,
|
|
448
|
+
data: data,
|
|
449
|
+
template: template,
|
|
450
|
+
config: config,
|
|
451
|
+
matPopupOptions,
|
|
452
|
+
ownerCords: ownerCords,
|
|
453
|
+
selfCords: cords,
|
|
454
|
+
id: specificId
|
|
455
|
+
},
|
|
456
|
+
panelClass: ["ngx-tooltip", 'ngx-' + specificId].concat(config?.customClass || []),
|
|
457
|
+
position: cords,
|
|
458
|
+
hasBackdrop: false,
|
|
459
|
+
...matPopupOptions
|
|
460
|
+
})
|
|
461
|
+
.afterClosed());
|
|
467
462
|
};
|
|
468
463
|
|
|
469
464
|
const zone = new Zone(Zone.current, { name: "@dotglitch_menu", properties: {} });
|
|
@@ -512,7 +507,7 @@ class MenuComponent {
|
|
|
512
507
|
this.dialog = dialog;
|
|
513
508
|
this.dialogRef = dialogRef;
|
|
514
509
|
this.overlayOverlap = 32;
|
|
515
|
-
this.hoverDelay =
|
|
510
|
+
this.hoverDelay = 400;
|
|
516
511
|
this.showDebugOverlay = false;
|
|
517
512
|
this.isLockedOpen = false;
|
|
518
513
|
this.hasBootstrapped = false;
|
|
@@ -539,6 +534,7 @@ class MenuComponent {
|
|
|
539
534
|
this.id = this._data?.id;
|
|
540
535
|
this.parentItem = this._data?.parentItem;
|
|
541
536
|
this.parentContext = this._data?.parentContext;
|
|
537
|
+
this.isLockedOpen = this.isLockedOpen || this._data?.config?.['_isLockedOpen'];
|
|
542
538
|
this.template = _data.template;
|
|
543
539
|
this.templateType = this.template instanceof TemplateRef ? "template" : "component";
|
|
544
540
|
if (this.templateType == "component") {
|
|
@@ -634,7 +630,7 @@ class MenuComponent {
|
|
|
634
630
|
* @param evt
|
|
635
631
|
* @returns
|
|
636
632
|
*/
|
|
637
|
-
async onMenuItemClick(item, row) {
|
|
633
|
+
async onMenuItemClick(item, row, keepOpen = false) {
|
|
638
634
|
if (typeof item == 'string')
|
|
639
635
|
return null;
|
|
640
636
|
if (item.separator)
|
|
@@ -686,6 +682,8 @@ class MenuComponent {
|
|
|
686
682
|
cords.top = bounds.y + "px";
|
|
687
683
|
if (!cords.left)
|
|
688
684
|
cords.left = bounds.x + bounds.width + "px";
|
|
685
|
+
const config = structuredClone(this.config);
|
|
686
|
+
config['_isLockedOpen'] = keepOpen;
|
|
689
687
|
const dialogRef = this.dialog.open(MenuComponent, {
|
|
690
688
|
position: cords,
|
|
691
689
|
panelClass: ["ngx-menu"].concat(this.config?.customClass || []),
|
|
@@ -699,7 +697,7 @@ class MenuComponent {
|
|
|
699
697
|
parentContext: context,
|
|
700
698
|
items: item['_children'],
|
|
701
699
|
template: item.childTemplate,
|
|
702
|
-
config:
|
|
700
|
+
config: config
|
|
703
701
|
}
|
|
704
702
|
});
|
|
705
703
|
let _s = dialogRef
|
|
@@ -808,7 +806,7 @@ class MenuComponent {
|
|
|
808
806
|
});
|
|
809
807
|
}
|
|
810
808
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", 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 }); }
|
|
811
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", 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", isLockedOpen: "isLockedOpen" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n <div\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 (pointerenter)=\"pointerHasBeenOverMask=true\"\n ></div>\n}\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 (pointermove)=\"hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (wheel)=\"onWheel($event)\"\n></div>\n\n@if (!template) {\n <table>\n <tbody>\n @for (item of items; track item) {\n <!-- A row with a click action -->\n @if (item != 'separator' && item.separator != true && item['_visible']) {\n <tr #row\n [class.disabled]=\"item['_disabled']\"\n (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n [class.hover]=\"row['hover']\"\n [class.open]=\"row['_open']\"\n (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n >\n\n @if (showIconColumn) {\n <td class=\"icon\">\n @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n <img [src]=\"item['_icon'] ?? item.icon\"/>\n }\n @else {\n <mat-icon\n [fontIcon]=\"item['_icon'] ?? item.icon\"\n [style.color]=\"item.iconColor\"\n />\n }\n </td>\n }\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 @if ($any(item.labelTemplate)?.prototype) {\n <ng-container\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 @else {\n @if ($any(item)?.labelTemplate) {\n {{$any(item)?.labelTemplate(data || {})}}\n }\n @else {\n <div [innerHTML]=\"item['_formattedLabel']\"></div>\n }\n }\n </a>\n </td>\n\n @if (showShortcutColumn) {\n <td class=\"shortcut\">\n {{item.shortcutLabel}}\n </td>\n }\n\n <td style=\"min-width: 16px\">\n @if ((\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 <mat-icon\n style=\"transform: translateY(2px)\"\n >\n chevron_right\n </mat-icon>\n }\n\n @if (item['_isResolving']) {\n <mat-progress-spinner\n mode=\"indeterminate\"\n [diameter]=\"20\"\n style=\"margin-right: 4px\"\n />\n }\n </td>\n </tr>\n }\n @else if (item != 'separator' && item.separator == true) {\n <!-- Separator with label -->\n <tr\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 @else if (item == 'separator') {\n <!-- Separator -->\n <tr\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 }\n }\n </tbody>\n </table>\n}\n@else {\n @if (templateType == 'template') {\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 }\n @else {\n <ng-container\n [cdkPortalOutlet]=\"componentPortal\"\n />\n }\n}\n\n@if (showDebugOverlay) {\n <div>\n <div>hbs: {{hasBootstrapped}}</div>\n <div>pov: {{pointerIsOnVoid}}</div>\n <div>ilo: {{isLockedOpen}}</div>\n <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n <div>type: {{templateType}}</div>\n </div>\n}\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,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open 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}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.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: 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"] }] }); }
|
|
809
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", 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", isLockedOpen: "isLockedOpen" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n <div\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 (pointerenter)=\"pointerHasBeenOverMask=true\"\n (click)=\"isLockedOpen = true\"\n ></div>\n}\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 (pointermove)=\"hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (wheel)=\"onWheel($event)\"\n></div>\n\n@if (!template) {\n <table>\n <tbody>\n @for (item of items; track item) {\n <!-- A row with a click action -->\n @if (item != 'separator' && item.separator != true && item['_visible']) {\n <tr #row\n [class.disabled]=\"item['_disabled']\"\n (click)=\"!item['_disabled'] && onMenuItemClick(item, row, true)\"\n [class.hover]=\"row['hover']\"\n [class.open]=\"row['_open']\"\n (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n >\n\n @if (showIconColumn) {\n <td class=\"icon\">\n @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n <img [src]=\"item['_icon'] ?? item.icon\"/>\n }\n @else {\n <mat-icon\n [fontIcon]=\"item['_icon'] ?? item.icon\"\n [style.color]=\"item.iconColor\"\n />\n }\n </td>\n }\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 @if ($any(item.labelTemplate)?.prototype) {\n <ng-container\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 @else {\n @if ($any(item)?.labelTemplate) {\n {{$any(item)?.labelTemplate(data || {})}}\n }\n @else {\n <div [innerHTML]=\"item['_formattedLabel']\"></div>\n }\n }\n </a>\n </td>\n\n @if (showShortcutColumn) {\n <td class=\"shortcut\">\n {{item.shortcutLabel}}\n </td>\n }\n\n <td style=\"min-width: 16px\">\n @if ((\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 <mat-icon\n style=\"transform: translateY(2px)\"\n >\n chevron_right\n </mat-icon>\n }\n\n @if (item['_isResolving']) {\n <mat-progress-spinner\n mode=\"indeterminate\"\n [diameter]=\"20\"\n style=\"margin-right: 4px\"\n />\n }\n </td>\n </tr>\n }\n @else if (item != 'separator' && item.separator == true) {\n <!-- Separator with label -->\n <tr\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 @else if (item == 'separator') {\n <!-- Separator -->\n <tr\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 }\n }\n </tbody>\n </table>\n}\n@else {\n @if (templateType == 'template') {\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 }\n @else {\n <ng-container\n [cdkPortalOutlet]=\"componentPortal\"\n />\n }\n}\n\n@if (showDebugOverlay) {\n <div>\n <div>hbs: {{hasBootstrapped}}</div>\n <div>pov: {{pointerIsOnVoid}}</div>\n <div>ilo: {{isLockedOpen}}</div>\n <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n <div>type: {{templateType}}</div>\n </div>\n}\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,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open 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}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.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: 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"] }] }); }
|
|
812
810
|
}
|
|
813
811
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MenuComponent, decorators: [{
|
|
814
812
|
type: Component,
|
|
@@ -818,7 +816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
818
816
|
MatIconModule,
|
|
819
817
|
MatProgressSpinnerModule,
|
|
820
818
|
TooltipDirective
|
|
821
|
-
], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n <div\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 (pointerenter)=\"pointerHasBeenOverMask=true\"\n ></div>\n}\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 (pointermove)=\"hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (wheel)=\"onWheel($event)\"\n></div>\n\n@if (!template) {\n <table>\n <tbody>\n @for (item of items; track item) {\n <!-- A row with a click action -->\n @if (item != 'separator' && item.separator != true && item['_visible']) {\n <tr #row\n [class.disabled]=\"item['_disabled']\"\n (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n [class.hover]=\"row['hover']\"\n [class.open]=\"row['_open']\"\n (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n >\n\n @if (showIconColumn) {\n <td class=\"icon\">\n @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n <img [src]=\"item['_icon'] ?? item.icon\"/>\n }\n @else {\n <mat-icon\n [fontIcon]=\"item['_icon'] ?? item.icon\"\n [style.color]=\"item.iconColor\"\n />\n }\n </td>\n }\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 @if ($any(item.labelTemplate)?.prototype) {\n <ng-container\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 @else {\n @if ($any(item)?.labelTemplate) {\n {{$any(item)?.labelTemplate(data || {})}}\n }\n @else {\n <div [innerHTML]=\"item['_formattedLabel']\"></div>\n }\n }\n </a>\n </td>\n\n @if (showShortcutColumn) {\n <td class=\"shortcut\">\n {{item.shortcutLabel}}\n </td>\n }\n\n <td style=\"min-width: 16px\">\n @if ((\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 <mat-icon\n style=\"transform: translateY(2px)\"\n >\n chevron_right\n </mat-icon>\n }\n\n @if (item['_isResolving']) {\n <mat-progress-spinner\n mode=\"indeterminate\"\n [diameter]=\"20\"\n style=\"margin-right: 4px\"\n />\n }\n </td>\n </tr>\n }\n @else if (item != 'separator' && item.separator == true) {\n <!-- Separator with label -->\n <tr\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 @else if (item == 'separator') {\n <!-- Separator -->\n <tr\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 }\n }\n </tbody>\n </table>\n}\n@else {\n @if (templateType == 'template') {\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 }\n @else {\n <ng-container\n [cdkPortalOutlet]=\"componentPortal\"\n />\n }\n}\n\n@if (showDebugOverlay) {\n <div>\n <div>hbs: {{hasBootstrapped}}</div>\n <div>pov: {{pointerIsOnVoid}}</div>\n <div>ilo: {{isLockedOpen}}</div>\n <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n <div>type: {{templateType}}</div>\n </div>\n}\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,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open 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}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.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"] }]
|
|
819
|
+
], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n <div\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 (pointerenter)=\"pointerHasBeenOverMask=true\"\n (click)=\"isLockedOpen = true\"\n ></div>\n}\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 (pointermove)=\"hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n (wheel)=\"onWheel($event)\"\n></div>\n\n@if (!template) {\n <table>\n <tbody>\n @for (item of items; track item) {\n <!-- A row with a click action -->\n @if (item != 'separator' && item.separator != true && item['_visible']) {\n <tr #row\n [class.disabled]=\"item['_disabled']\"\n (click)=\"!item['_disabled'] && onMenuItemClick(item, row, true)\"\n [class.hover]=\"row['hover']\"\n [class.open]=\"row['_open']\"\n (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n >\n\n @if (showIconColumn) {\n <td class=\"icon\">\n @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n <img [src]=\"item['_icon'] ?? item.icon\"/>\n }\n @else {\n <mat-icon\n [fontIcon]=\"item['_icon'] ?? item.icon\"\n [style.color]=\"item.iconColor\"\n />\n }\n </td>\n }\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 @if ($any(item.labelTemplate)?.prototype) {\n <ng-container\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 @else {\n @if ($any(item)?.labelTemplate) {\n {{$any(item)?.labelTemplate(data || {})}}\n }\n @else {\n <div [innerHTML]=\"item['_formattedLabel']\"></div>\n }\n }\n </a>\n </td>\n\n @if (showShortcutColumn) {\n <td class=\"shortcut\">\n {{item.shortcutLabel}}\n </td>\n }\n\n <td style=\"min-width: 16px\">\n @if ((\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 <mat-icon\n style=\"transform: translateY(2px)\"\n >\n chevron_right\n </mat-icon>\n }\n\n @if (item['_isResolving']) {\n <mat-progress-spinner\n mode=\"indeterminate\"\n [diameter]=\"20\"\n style=\"margin-right: 4px\"\n />\n }\n </td>\n </tr>\n }\n @else if (item != 'separator' && item.separator == true) {\n <!-- Separator with label -->\n <tr\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 @else if (item == 'separator') {\n <!-- Separator -->\n <tr\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 }\n }\n </tbody>\n </table>\n}\n@else {\n @if (templateType == 'template') {\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 }\n @else {\n <ng-container\n [cdkPortalOutlet]=\"componentPortal\"\n />\n }\n}\n\n@if (showDebugOverlay) {\n <div>\n <div>hbs: {{hasBootstrapped}}</div>\n <div>pov: {{pointerIsOnVoid}}</div>\n <div>ilo: {{isLockedOpen}}</div>\n <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n <div>type: {{templateType}}</div>\n </div>\n}\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,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open 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}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.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"] }]
|
|
822
820
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
|
|
823
821
|
type: Optional
|
|
824
822
|
}, {
|
|
@@ -873,22 +871,22 @@ class MenuDirective {
|
|
|
873
871
|
if (this.ctxMenuItems) {
|
|
874
872
|
el.addEventListener('contextmenu', (e) => {
|
|
875
873
|
e.preventDefault();
|
|
876
|
-
this.openMenu(e, this.ctxMenuItems);
|
|
874
|
+
this.openMenu(e, this.ctxMenuItems, true);
|
|
877
875
|
});
|
|
878
876
|
}
|
|
879
877
|
if (this.menuItems?.length > 0) {
|
|
880
878
|
if (!this.config?.trigger) {
|
|
881
879
|
el.addEventListener('click', (e) => {
|
|
882
|
-
this.openMenu(e, this.menuItems);
|
|
880
|
+
this.openMenu(e, this.menuItems, true);
|
|
883
881
|
});
|
|
884
882
|
}
|
|
885
883
|
else {
|
|
886
884
|
const triggers = Array.isArray(this.config.trigger) ? this.config.trigger : [this.config.trigger];
|
|
887
885
|
triggers.forEach(t => {
|
|
888
|
-
if (
|
|
886
|
+
if (["contextmenu", "click"].includes(t)) {
|
|
889
887
|
el.addEventListener(t, (e) => {
|
|
890
888
|
e.preventDefault();
|
|
891
|
-
this.openMenu(e, this.ctxMenuItems);
|
|
889
|
+
this.openMenu(e, this.ctxMenuItems, true);
|
|
892
890
|
});
|
|
893
891
|
}
|
|
894
892
|
else {
|
|
@@ -898,10 +896,12 @@ class MenuDirective {
|
|
|
898
896
|
}
|
|
899
897
|
}
|
|
900
898
|
}
|
|
901
|
-
async openMenu(evt, items = this.menuItems) {
|
|
899
|
+
async openMenu(evt, items = this.menuItems, keepOpen = false) {
|
|
902
900
|
const el = this.viewContainer.element.nativeElement;
|
|
903
901
|
el.classList.add("ngx-menu-open");
|
|
904
902
|
const isCtxEvent = evt.button == 2;
|
|
903
|
+
const config = structuredClone(this.config);
|
|
904
|
+
config['_isLockedOpen'] = keepOpen;
|
|
905
905
|
return openMenu(this.dialog, items, this.data, evt, this.config, isCtxEvent ? null : el)
|
|
906
906
|
.then((...res) => {
|
|
907
907
|
el.classList.remove("ngx-menu-open");
|
|
@@ -949,26 +949,21 @@ const openMenu = async (dialog, menuItems, data, evt, config = {}, el) => {
|
|
|
949
949
|
config.alignment = "start";
|
|
950
950
|
const cords = getPosition(el || evt, config, await calcMenuItemBounds(menuItems, data));
|
|
951
951
|
const specificId = ulid();
|
|
952
|
-
return
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
.afterClosed()
|
|
968
|
-
.subscribe(s => {
|
|
969
|
-
res(s);
|
|
970
|
-
});
|
|
971
|
-
});
|
|
952
|
+
return firstValueFrom(dialog.open(MenuComponent, {
|
|
953
|
+
data: {
|
|
954
|
+
dialog,
|
|
955
|
+
data: data,
|
|
956
|
+
ownerCords: el?.getBoundingClientRect(),
|
|
957
|
+
selfCords: cords,
|
|
958
|
+
items: menuItems,
|
|
959
|
+
config: config,
|
|
960
|
+
id: specificId
|
|
961
|
+
},
|
|
962
|
+
panelClass: ["ngx-menu", 'ngx-' + specificId].concat(config?.customClass || []),
|
|
963
|
+
position: cords,
|
|
964
|
+
backdropClass: "ngx-menu-backdrop"
|
|
965
|
+
})
|
|
966
|
+
.afterClosed());
|
|
972
967
|
};
|
|
973
968
|
|
|
974
969
|
/**
|