@ngrdt/menu 0.0.7 → 0.0.9
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/README.md +7 -7
- package/esm2022/index.mjs +1 -1
- package/esm2022/lib/menu/rdt-menu.component.mjs +24 -16
- package/esm2022/lib/menu-bar/rdt-menu-bar.component.mjs +3 -3
- package/esm2022/lib/menu-base/rdt-menu-base.component.mjs +25 -11
- package/esm2022/lib/menu-overlay/rdt-menu-overlay.component.mjs +21 -5
- package/esm2022/lib/rdt-menu.module.mjs +5 -2
- package/fesm2022/ngrdt-menu.mjs +130 -90
- package/fesm2022/ngrdt-menu.mjs.map +1 -1
- package/lib/menu/rdt-menu.component.d.ts +6 -5
- package/lib/menu-base/rdt-menu-base.component.d.ts +8 -4
- package/lib/menu-overlay/rdt-menu-overlay.component.d.ts +2 -0
- package/lib/rdt-menu.module.d.ts +2 -1
- package/package.json +5 -4
package/fesm2022/ngrdt-menu.mjs
CHANGED
|
@@ -1,82 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewChildren, ViewChild, Input, HostBinding, HostListener, EnvironmentInjector, booleanAttribute, Directive, ViewEncapsulation, numberAttribute, NgModule } from '@angular/core';
|
|
3
|
-
import
|
|
3
|
+
import * as i2$1 from '@ngrdt/button';
|
|
4
|
+
import { RDT_BUTTON_BASE_PROVIDER, RdtButtonOutletDirective } from '@ngrdt/button';
|
|
4
5
|
import * as i1 from '@angular/common';
|
|
5
6
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
6
7
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
7
8
|
import * as i2 from '@angular/router';
|
|
8
9
|
import { Router, RouterModule } from '@angular/router';
|
|
9
|
-
import { delay, of, map, first, Subscription, fromEvent, throttleTime, animationFrameScheduler } from 'rxjs';
|
|
10
10
|
import * as i3 from '@ngrdt/router';
|
|
11
11
|
import { RdtRouterService, RdtAnyRouteActiveDirective } from '@ngrdt/router';
|
|
12
12
|
import * as i4 from '@ngrdt/shortcuts';
|
|
13
13
|
import { RdtShortcutService, RdtShortcut, RdtKeyListenerDirective } from '@ngrdt/shortcuts';
|
|
14
|
-
import {
|
|
15
|
-
|
|
16
|
-
function parseMenuItems(items, injector, prefix = '') {
|
|
17
|
-
return items
|
|
18
|
-
.map((item) => {
|
|
19
|
-
let newPrefix;
|
|
20
|
-
if (item.dataTestId) {
|
|
21
|
-
newPrefix = item.dataTestId;
|
|
22
|
-
}
|
|
23
|
-
else if (prefix) {
|
|
24
|
-
newPrefix = RdtStringUtils.getDataTestId(item.label, prefix);
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
newPrefix = RdtStringUtils.getDataTestId(item.label);
|
|
28
|
-
}
|
|
29
|
-
const newDataTestId = RdtStringUtils.getDataTestId(newPrefix, null, 'menu-item');
|
|
30
|
-
const res = {
|
|
31
|
-
label: item.label,
|
|
32
|
-
icon: item.icon,
|
|
33
|
-
shortcut: item.shortcut,
|
|
34
|
-
command: item.command,
|
|
35
|
-
visible: item.visible,
|
|
36
|
-
queryParams: item.queryParams,
|
|
37
|
-
requiredParent: item.requiredParent,
|
|
38
|
-
dataTestId: newDataTestId,
|
|
39
|
-
};
|
|
40
|
-
if (item.items) {
|
|
41
|
-
const childrenRes = res;
|
|
42
|
-
const parsedChildren = parseMenuItems(item.items, injector, newPrefix);
|
|
43
|
-
if (parsedChildren.length > 0) {
|
|
44
|
-
childrenRes.items = parsedChildren;
|
|
45
|
-
}
|
|
46
|
-
return childrenRes;
|
|
47
|
-
}
|
|
48
|
-
else if (item.routerLink) {
|
|
49
|
-
const linkRes = res;
|
|
50
|
-
linkRes.target = item.target ?? '_self';
|
|
51
|
-
if (item.routerLink) {
|
|
52
|
-
linkRes.routerLink = [item.routerLink.createAbsoluteUrl()];
|
|
53
|
-
if (!res.visible && item.routerLink.hasCanBeEnteredGuard) {
|
|
54
|
-
const canBeEntered = item.routerLink.canBeEntered.bind(item.routerLink);
|
|
55
|
-
linkRes.visible = () => canBeEntered(injector);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
return linkRes;
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
const linkRes = res;
|
|
62
|
-
if (item.externalLink) {
|
|
63
|
-
if (item.queryParams) {
|
|
64
|
-
linkRes.externalLink = RdtStringUtils.appendQueryParams(item.externalLink, item.queryParams);
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
linkRes.externalLink = item.externalLink;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
linkRes.target = item.target ?? '_blank';
|
|
71
|
-
return linkRes;
|
|
72
|
-
}
|
|
73
|
-
})
|
|
74
|
-
.filter((item) => !item.visible || item.visible())
|
|
75
|
-
.filter((item) => item.externalLink ||
|
|
76
|
-
item['routerLink'] ||
|
|
77
|
-
item.command ||
|
|
78
|
-
(item['items']?.length ?? 0) > 0);
|
|
79
|
-
}
|
|
14
|
+
import { KB_CODE, RdtObjectUtils, RdtStringUtils } from '@ngrdt/utils';
|
|
15
|
+
import { delay, of, map, first, Subscription, fromEvent, throttleTime, animationFrameScheduler } from 'rxjs';
|
|
80
16
|
|
|
81
17
|
var RdtMenuShortcutMode;
|
|
82
18
|
(function (RdtMenuShortcutMode) {
|
|
@@ -336,6 +272,22 @@ class RdtMenuOverlayComponent {
|
|
|
336
272
|
}
|
|
337
273
|
this.recalculateChildren();
|
|
338
274
|
}
|
|
275
|
+
onItemPointerEnter(item) {
|
|
276
|
+
if (this.topLevelMenu.openOnHover &&
|
|
277
|
+
this.expandedChild !== item &&
|
|
278
|
+
menuItemHasChildren(item)) {
|
|
279
|
+
this.autofocusSubmenuItem = null;
|
|
280
|
+
this.expandedChild = item;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
onItemPointerLeave(item) {
|
|
284
|
+
if (this.topLevelMenu.openOnHover &&
|
|
285
|
+
this.expandedChild === item &&
|
|
286
|
+
menuItemHasChildren(item)) {
|
|
287
|
+
this.autofocusSubmenuItem = null;
|
|
288
|
+
this.expandedChild = null;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
339
291
|
onItemClick(item) {
|
|
340
292
|
const hasChildren = menuItemHasChildren(item);
|
|
341
293
|
if (hasChildren && this.expandedChild !== item) {
|
|
@@ -680,11 +632,11 @@ class RdtMenuOverlayComponent {
|
|
|
680
632
|
.subscribe((event) => this.onTabKeyPress(event));
|
|
681
633
|
}
|
|
682
634
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
683
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: { item: "item", level: "level", preferredHorizontalDir: "preferredHorizontalDir", preferredVerticalDir: "preferredVerticalDir", expanded: "expanded", autofocusItem: "autofocusItem", anchorElement: "anchorElement" }, host: { listeners: { "window:focusout": "checkActiveElement($event)" }, properties: { "class.expanded": "this.expanded", "attr.role": "this.roleAttr", "attr.tabindex": "this.tabindexAttr", "style.z-index": "this.zIndex" } }, viewQueries: [{ propertyName: "menuItemContainer", first: true, predicate: ["menuItemContainer"], descendants: true }, { propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n <li\r\n *ngFor=\"let item of item.items; let i = index\"\r\n role=\"presentation\"\r\n class=\"menu-item\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n rdtAnyRouteActive=\"menu-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n #anchorEl\r\n >\r\n <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n <button\r\n #focusableItem\r\n class=\"menu-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"item === expandedChild\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n\r\n <div class=\"menu-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO:\r\n <
|
|
635
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: { item: "item", level: "level", preferredHorizontalDir: "preferredHorizontalDir", preferredVerticalDir: "preferredVerticalDir", expanded: "expanded", autofocusItem: "autofocusItem", anchorElement: "anchorElement" }, host: { listeners: { "window:focusout": "checkActiveElement($event)" }, properties: { "class.expanded": "this.expanded", "attr.role": "this.roleAttr", "attr.tabindex": "this.tabindexAttr", "style.z-index": "this.zIndex" } }, viewQueries: [{ propertyName: "menuItemContainer", first: true, predicate: ["menuItemContainer"], descendants: true }, { propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n <li\r\n *ngFor=\"let item of item.items; let i = index\"\r\n role=\"presentation\"\r\n class=\"menu-item\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n rdtAnyRouteActive=\"menu-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n (pointerleave)=\"onItemPointerLeave(item)\"\r\n #anchorEl\r\n >\r\n <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n <button\r\n #focusableItem\r\n class=\"menu-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n (pointerenter)=\"onItemPointerEnter(item)\"\r\n [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"item === expandedChild\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n\r\n <div class=\"menu-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO:\r\n <rdt-icon\r\n *ngIf=\"item.items\"\r\n name=\"chevron_right\"\r\n class=\"menu-item-icon\"\r\n />\r\n <rdt-icon\r\n *ngIf=\"item.icon\"\r\n [name]=\"item.icon\"\r\n class=\"menu-item-icon\"\r\n />\r\n -->\r\n <span class=\"menu-item-icon\" *ngIf=\"item.items\">></span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-template #linkBody let-item>\r\n {{ item.label }}\r\n\r\n <div class=\"menu-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO:\r\n <rdt-icon\r\n *ngIf=\"item.icon\"\r\n [name]=\"item.icon\"\r\n class=\"menu-item-icon\"\r\n />\r\n --></div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"item.routerLink\">\r\n <a\r\n #focusableItem\r\n class=\"menu-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [target]=\"item.target\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n />\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"item.externalLink\">\r\n <a\r\n #focusableItem\r\n class=\"menu-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [href]=\"item.externalLink\"\r\n [target]=\"item.target\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n />\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Child menus exist only if this menu is expanded. -->\r\n <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n <rdt-menu-overlay\r\n *ngIf=\"item.items && expanded\"\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expandedChild\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"horizontalDir?.dir!\"\r\n [preferredVerticalDir]=\"verticalDir?.dir!\"\r\n [level]=\"level + 1\"\r\n [anchorElement]=\"anchorEl\"\r\n />\r\n </li>\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px));overflow-y:auto}:host.expanded{visibility:visible}.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-item-background)}.menu-item{cursor:pointer;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{background-color:var(--rdt-menu-item-background-route-active)}.menu-item-content{display:flex;align-items:center;padding:var(--rdt-menu-item-padding);width:100%;background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color)}.menu-item-content:hover{background-color:var(--rdt-menu-item-background-hover)}.menu-item-content.focus-visible:focus,.menu-item-content:focus-visible{background-color:var(--rdt-menu-item-background-focus);outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["anyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
684
636
|
}
|
|
685
637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuOverlayComponent, decorators: [{
|
|
686
638
|
type: Component,
|
|
687
|
-
args: [{ selector: 'rdt-menu-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n <li\r\n *ngFor=\"let item of item.items; let i = index\"\r\n role=\"presentation\"\r\n class=\"menu-item\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n rdtAnyRouteActive=\"menu-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n #anchorEl\r\n >\r\n <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n <button\r\n #focusableItem\r\n class=\"menu-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"item === expandedChild\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n\r\n <div class=\"menu-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO:\r\n <
|
|
639
|
+
args: [{ selector: 'rdt-menu-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n <li\r\n *ngFor=\"let item of item.items; let i = index\"\r\n role=\"presentation\"\r\n class=\"menu-item\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n rdtAnyRouteActive=\"menu-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n (pointerleave)=\"onItemPointerLeave(item)\"\r\n #anchorEl\r\n >\r\n <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n <button\r\n #focusableItem\r\n class=\"menu-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n (pointerenter)=\"onItemPointerEnter(item)\"\r\n [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"item === expandedChild\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n\r\n <div class=\"menu-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO:\r\n <rdt-icon\r\n *ngIf=\"item.items\"\r\n name=\"chevron_right\"\r\n class=\"menu-item-icon\"\r\n />\r\n <rdt-icon\r\n *ngIf=\"item.icon\"\r\n [name]=\"item.icon\"\r\n class=\"menu-item-icon\"\r\n />\r\n -->\r\n <span class=\"menu-item-icon\" *ngIf=\"item.items\">></span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-template #linkBody let-item>\r\n {{ item.label }}\r\n\r\n <div class=\"menu-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO:\r\n <rdt-icon\r\n *ngIf=\"item.icon\"\r\n [name]=\"item.icon\"\r\n class=\"menu-item-icon\"\r\n />\r\n --></div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"item.routerLink\">\r\n <a\r\n #focusableItem\r\n class=\"menu-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [target]=\"item.target\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n />\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"item.externalLink\">\r\n <a\r\n #focusableItem\r\n class=\"menu-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [href]=\"item.externalLink\"\r\n [target]=\"item.target\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n />\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Child menus exist only if this menu is expanded. -->\r\n <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n <rdt-menu-overlay\r\n *ngIf=\"item.items && expanded\"\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expandedChild\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"horizontalDir?.dir!\"\r\n [preferredVerticalDir]=\"verticalDir?.dir!\"\r\n [level]=\"level + 1\"\r\n [anchorElement]=\"anchorEl\"\r\n />\r\n </li>\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px));overflow-y:auto}:host.expanded{visibility:visible}.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-item-background)}.menu-item{cursor:pointer;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{background-color:var(--rdt-menu-item-background-route-active)}.menu-item-content{display:flex;align-items:center;padding:var(--rdt-menu-item-padding);width:100%;background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color)}.menu-item-content:hover{background-color:var(--rdt-menu-item-background-hover)}.menu-item-content.focus-visible:focus,.menu-item-content:focus-visible{background-color:var(--rdt-menu-item-background-focus);outline:none}\n"] }]
|
|
688
640
|
}], propDecorators: { children: [{
|
|
689
641
|
type: ViewChildren,
|
|
690
642
|
args: [RdtMenuOverlayComponent]
|
|
@@ -734,6 +686,7 @@ class RdtMenuBaseComponent {
|
|
|
734
686
|
// If item has command or routerLink, it will always be activated and everything closed
|
|
735
687
|
shortcutMode = RdtMenuShortcutMode.OPEN_SUBMENU;
|
|
736
688
|
closeOnFocusOut = true;
|
|
689
|
+
openOnHover = false;
|
|
737
690
|
cd = inject(ChangeDetectorRef);
|
|
738
691
|
destroyRef = inject(DestroyRef);
|
|
739
692
|
rdtRouter = inject(RdtRouterService);
|
|
@@ -776,7 +729,6 @@ class RdtMenuBaseComponent {
|
|
|
776
729
|
return this.childRoutesMap.get(item) ?? [];
|
|
777
730
|
}
|
|
778
731
|
ngOnInit() {
|
|
779
|
-
this.childRoutesMap = getChildRoutesMap(this.parsedItems);
|
|
780
732
|
this.rdtRouter.navigationEnd$
|
|
781
733
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
782
734
|
.subscribe((ev) => this.filterItems());
|
|
@@ -786,10 +738,6 @@ class RdtMenuBaseComponent {
|
|
|
786
738
|
if (this.children) {
|
|
787
739
|
this.recalculateChildren();
|
|
788
740
|
}
|
|
789
|
-
if ('items' in changes) {
|
|
790
|
-
this.childRoutesMap = getChildRoutesMap(this.parsedItems);
|
|
791
|
-
this.listenShortcuts();
|
|
792
|
-
}
|
|
793
741
|
}
|
|
794
742
|
ngAfterViewInit() {
|
|
795
743
|
this.listenWindowResize();
|
|
@@ -823,6 +771,19 @@ class RdtMenuBaseComponent {
|
|
|
823
771
|
item.command();
|
|
824
772
|
}
|
|
825
773
|
}
|
|
774
|
+
onItemPointerEnter(item) {
|
|
775
|
+
if (this.openOnHover &&
|
|
776
|
+
this.expanded !== item &&
|
|
777
|
+
menuItemHasChildren(item)) {
|
|
778
|
+
this.autofocusSubmenuItem = null;
|
|
779
|
+
this.expanded = item;
|
|
780
|
+
}
|
|
781
|
+
}
|
|
782
|
+
onItemPointerLeave(item) {
|
|
783
|
+
if (this.openOnHover && this.expanded === item) {
|
|
784
|
+
this.expanded = null;
|
|
785
|
+
}
|
|
786
|
+
}
|
|
826
787
|
onKeyDown(itemIndex, event) {
|
|
827
788
|
const hasAction = event.code in this.keyActions;
|
|
828
789
|
const isLetter = RdtStringUtils.isAlphabetCharacter(event.key) ||
|
|
@@ -858,6 +819,8 @@ class RdtMenuBaseComponent {
|
|
|
858
819
|
else {
|
|
859
820
|
this.parsedItems = this.filterRec(this.allParsedItems, current);
|
|
860
821
|
}
|
|
822
|
+
this.childRoutesMap = getChildRoutesMap(this.parsedItems);
|
|
823
|
+
this.listenShortcuts();
|
|
861
824
|
this.cd.markForCheck();
|
|
862
825
|
}
|
|
863
826
|
filterRec(items, current) {
|
|
@@ -1052,7 +1015,7 @@ class RdtMenuBaseComponent {
|
|
|
1052
1015
|
}
|
|
1053
1016
|
}
|
|
1054
1017
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1055
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.7", type: RdtMenuBaseComponent, inputs: { preferredVerticalDir: "preferredVerticalDir", preferredHorizontalDir: "preferredHorizontalDir", shortcutMode: "shortcutMode", closeOnFocusOut: ["closeOnFocusOut", "closeOnFocusOut", booleanAttribute] }, host: { listeners: { "window:focusout": "checkActiveElement($event)", "document:click": "onDocumentClick($event)" }, properties: { "class": "this.classes" } }, viewQueries: [{ propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0 });
|
|
1018
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.7", type: RdtMenuBaseComponent, inputs: { preferredVerticalDir: "preferredVerticalDir", preferredHorizontalDir: "preferredHorizontalDir", shortcutMode: "shortcutMode", closeOnFocusOut: ["closeOnFocusOut", "closeOnFocusOut", booleanAttribute], openOnHover: ["openOnHover", "openOnHover", booleanAttribute] }, host: { listeners: { "window:focusout": "checkActiveElement($event)", "document:click": "onDocumentClick($event)" }, properties: { "class": "this.classes" } }, viewQueries: [{ propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0 });
|
|
1056
1019
|
}
|
|
1057
1020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBaseComponent, decorators: [{
|
|
1058
1021
|
type: Directive
|
|
@@ -1065,6 +1028,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1065
1028
|
}], closeOnFocusOut: [{
|
|
1066
1029
|
type: Input,
|
|
1067
1030
|
args: [{ transform: booleanAttribute }]
|
|
1031
|
+
}], openOnHover: [{
|
|
1032
|
+
type: Input,
|
|
1033
|
+
args: [{ transform: booleanAttribute }]
|
|
1068
1034
|
}], children: [{
|
|
1069
1035
|
type: ViewChildren,
|
|
1070
1036
|
args: [RdtMenuOverlayComponent]
|
|
@@ -1082,6 +1048,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1082
1048
|
args: ['document:click', ['$event']]
|
|
1083
1049
|
}] } });
|
|
1084
1050
|
|
|
1051
|
+
function parseMenuItems(items, injector, prefix = '') {
|
|
1052
|
+
return items
|
|
1053
|
+
.map((item) => {
|
|
1054
|
+
let newPrefix;
|
|
1055
|
+
if (item.dataTestId) {
|
|
1056
|
+
newPrefix = item.dataTestId;
|
|
1057
|
+
}
|
|
1058
|
+
else if (prefix) {
|
|
1059
|
+
newPrefix = RdtStringUtils.getDataTestId(item.label, prefix);
|
|
1060
|
+
}
|
|
1061
|
+
else {
|
|
1062
|
+
newPrefix = RdtStringUtils.getDataTestId(item.label);
|
|
1063
|
+
}
|
|
1064
|
+
const newDataTestId = RdtStringUtils.getDataTestId(newPrefix, null, 'menu-item');
|
|
1065
|
+
const res = {
|
|
1066
|
+
label: item.label,
|
|
1067
|
+
icon: item.icon,
|
|
1068
|
+
shortcut: item.shortcut,
|
|
1069
|
+
command: item.command,
|
|
1070
|
+
visible: item.visible,
|
|
1071
|
+
queryParams: item.queryParams,
|
|
1072
|
+
requiredParent: item.requiredParent,
|
|
1073
|
+
dataTestId: newDataTestId,
|
|
1074
|
+
};
|
|
1075
|
+
if (item.items) {
|
|
1076
|
+
const childrenRes = res;
|
|
1077
|
+
const parsedChildren = parseMenuItems(item.items, injector, newPrefix);
|
|
1078
|
+
if (parsedChildren.length > 0) {
|
|
1079
|
+
childrenRes.items = parsedChildren;
|
|
1080
|
+
}
|
|
1081
|
+
return childrenRes;
|
|
1082
|
+
}
|
|
1083
|
+
else if (item.routerLink) {
|
|
1084
|
+
const linkRes = res;
|
|
1085
|
+
linkRes.target = item.target ?? '_self';
|
|
1086
|
+
if (item.routerLink) {
|
|
1087
|
+
linkRes.routerLink = [item.routerLink.createAbsoluteUrl()];
|
|
1088
|
+
if (!res.visible && item.routerLink.hasCanBeEnteredGuard) {
|
|
1089
|
+
const canBeEntered = item.routerLink.canBeEntered.bind(item.routerLink);
|
|
1090
|
+
linkRes.visible = () => canBeEntered(injector);
|
|
1091
|
+
}
|
|
1092
|
+
}
|
|
1093
|
+
return linkRes;
|
|
1094
|
+
}
|
|
1095
|
+
else {
|
|
1096
|
+
const linkRes = res;
|
|
1097
|
+
if (item.externalLink) {
|
|
1098
|
+
if (item.queryParams) {
|
|
1099
|
+
linkRes.externalLink = RdtStringUtils.appendQueryParams(item.externalLink, item.queryParams);
|
|
1100
|
+
}
|
|
1101
|
+
else {
|
|
1102
|
+
linkRes.externalLink = item.externalLink;
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1105
|
+
linkRes.target = item.target ?? '_blank';
|
|
1106
|
+
return linkRes;
|
|
1107
|
+
}
|
|
1108
|
+
})
|
|
1109
|
+
.filter((item) => !item.visible || item.visible())
|
|
1110
|
+
.filter((item) => item.externalLink ||
|
|
1111
|
+
item['routerLink'] ||
|
|
1112
|
+
item.command ||
|
|
1113
|
+
(item['items']?.length ?? 0) > 0);
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1085
1116
|
class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
1086
1117
|
buttonClass = inject(RDT_BUTTON_BASE_PROVIDER);
|
|
1087
1118
|
dataTestId = '';
|
|
@@ -1094,28 +1125,35 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1094
1125
|
this.filterItems();
|
|
1095
1126
|
}
|
|
1096
1127
|
_item;
|
|
1097
|
-
|
|
1128
|
+
onPointerLeave() {
|
|
1129
|
+
this.onItemPointerLeave(this.parsedItem);
|
|
1130
|
+
}
|
|
1098
1131
|
get parsedItem() {
|
|
1099
1132
|
return this.parsedItems[0];
|
|
1100
1133
|
}
|
|
1101
1134
|
get buttonInputs() {
|
|
1102
1135
|
return {
|
|
1103
|
-
'attr.role': 'menuitem',
|
|
1104
|
-
'attr.aria-haspopup': 'menu',
|
|
1105
|
-
'attr.aria-expanded': this.expanded === this.parsedItem,
|
|
1106
1136
|
tabIndex: 0,
|
|
1107
1137
|
dataTestId: this.dataTestId,
|
|
1108
|
-
|
|
1138
|
+
label: this.parsedItem.label,
|
|
1109
1139
|
icon: this.parsedItem.icon,
|
|
1140
|
+
aria: {
|
|
1141
|
+
role: 'menuitem',
|
|
1142
|
+
'aria-haspopup': 'menu',
|
|
1143
|
+
'aria-expanded': this.expanded === this.parsedItem,
|
|
1144
|
+
},
|
|
1110
1145
|
};
|
|
1111
1146
|
}
|
|
1147
|
+
toggle() {
|
|
1148
|
+
this.onItemClick(this.parsedItem);
|
|
1149
|
+
}
|
|
1112
1150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1113
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuComponent, selector: "rdt-menu", inputs: { dataTestId: "dataTestId", item: "item" }, providers: [
|
|
1151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuComponent, selector: "rdt-menu", inputs: { dataTestId: "dataTestId", item: "item" }, host: { listeners: { "pointerleave": "onPointerLeave()" } }, providers: [
|
|
1114
1152
|
{
|
|
1115
1153
|
provide: RdtMenuBaseComponent,
|
|
1116
1154
|
useExisting: RdtMenuComponent,
|
|
1117
1155
|
},
|
|
1118
|
-
],
|
|
1156
|
+
], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"menu-button-container\"\r\n (pointerenter)=\"onItemPointerEnter(parsedItem)\"\r\n>\r\n <ng-template\r\n rdtButtonOutlet\r\n [inputs]=\"buttonInputs\"\r\n (click$)=\"toggle()\"\r\n #outlet=\"rdtButtonOutlet\"\r\n />\r\n</div>\r\n\r\n<rdt-menu-overlay\r\n *ngIf=\"parsedItem\"\r\n [anchorElement]=\"outlet.instance?.anchorElement\"\r\n [item]=\"$any(parsedItem)\"\r\n [expanded]=\"expanded === parsedItem\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n [preferredVerticalDir]=\"preferredVerticalDir\"\r\n [level]=\"0\"\r\n/>\r\n", styles: ["rdt-menu{display:block;position:relative}rdt-menu .menu-button-container{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RdtButtonOutletDirective, selector: "[rdtButtonOutlet]", inputs: ["inputs"], outputs: ["click$"], exportAs: ["rdtButtonOutlet"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1119
1157
|
}
|
|
1120
1158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, decorators: [{
|
|
1121
1159
|
type: Component,
|
|
@@ -1124,15 +1162,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1124
1162
|
provide: RdtMenuBaseComponent,
|
|
1125
1163
|
useExisting: RdtMenuComponent,
|
|
1126
1164
|
},
|
|
1127
|
-
], template: "<
|
|
1165
|
+
], template: "<div\r\n class=\"menu-button-container\"\r\n (pointerenter)=\"onItemPointerEnter(parsedItem)\"\r\n>\r\n <ng-template\r\n rdtButtonOutlet\r\n [inputs]=\"buttonInputs\"\r\n (click$)=\"toggle()\"\r\n #outlet=\"rdtButtonOutlet\"\r\n />\r\n</div>\r\n\r\n<rdt-menu-overlay\r\n *ngIf=\"parsedItem\"\r\n [anchorElement]=\"outlet.instance?.anchorElement\"\r\n [item]=\"$any(parsedItem)\"\r\n [expanded]=\"expanded === parsedItem\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n [preferredVerticalDir]=\"preferredVerticalDir\"\r\n [level]=\"0\"\r\n/>\r\n", styles: ["rdt-menu{display:block;position:relative}rdt-menu .menu-button-container{display:inline-block}\n"] }]
|
|
1128
1166
|
}], propDecorators: { dataTestId: [{
|
|
1129
1167
|
type: Input
|
|
1130
1168
|
}], item: [{
|
|
1131
1169
|
type: Input,
|
|
1132
1170
|
args: [{ required: true }]
|
|
1133
|
-
}],
|
|
1134
|
-
type:
|
|
1135
|
-
args: [
|
|
1171
|
+
}], onPointerLeave: [{
|
|
1172
|
+
type: HostListener,
|
|
1173
|
+
args: ['pointerleave']
|
|
1136
1174
|
}] } });
|
|
1137
1175
|
|
|
1138
1176
|
class RdtMenuBarComponent extends RdtMenuBaseComponent {
|
|
@@ -1154,7 +1192,7 @@ class RdtMenuBarComponent extends RdtMenuBaseComponent {
|
|
|
1154
1192
|
provide: RdtMenuBaseComponent,
|
|
1155
1193
|
useExisting: RdtMenuBarComponent,
|
|
1156
1194
|
},
|
|
1157
|
-
], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\">\r\n <li\r\n *ngFor=\"let item of parsedItems; let i = index\"\r\n class=\"menu-bar-item\"\r\n role=\"presentation\"\r\n rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n #anchorEl\r\n >\r\n <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n <button\r\n #focusableItem\r\n class=\"menu-bar-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"item === expanded\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n\r\n <div class=\"menu-bar-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO\r\n <
|
|
1195
|
+
], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\">\r\n <li\r\n *ngFor=\"let item of parsedItems; let i = index\"\r\n class=\"menu-bar-item\"\r\n role=\"presentation\"\r\n rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n #anchorEl\r\n >\r\n <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n <button\r\n #focusableItem\r\n class=\"menu-bar-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n (pointerenter)=\"onItemPointerEnter(item)\"\r\n (pointerleave)=\"onItemPointerLeave(item)\"\r\n [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"item === expanded\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n\r\n <div class=\"menu-bar-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO\r\n <rdt-icon\r\n *ngIf=\"item.items\"\r\n name=\"expand_more\"\r\n class=\"menu-bar-item-icon\"\r\n inverted\r\n />\r\n <rdt-icon\r\n *ngIf=\"item.icon\"\r\n [name]=\"item.icon\"\r\n class=\"menu-bar-item-icon\"\r\n inverted\r\n />\r\n -->\r\n <span class=\"menu-bar-item-icon\" *ngIf=\"item.items\">v</span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-template #linkBody let-item>\r\n {{ item.label }}\r\n\r\n <div class=\"menu-bar-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!--\r\n <rdt-icon\r\n *ngIf=\"item.icon\"\r\n [name]=\"item.icon\"\r\n class=\"menu-bar-item-icon\"\r\n inverted\r\n />\r\n --></div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"item.routerLink\">\r\n <a\r\n #focusableItem\r\n class=\"menu-bar-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [routerLink]=\"item.routerLink\"\r\n [target]=\"item.target!\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n />\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"item.externalLink\">\r\n <a\r\n #focusableItem\r\n class=\"menu-bar-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [href]=\"item.externalLink\"\r\n [target]=\"item.target\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n />\r\n </a>\r\n </ng-container>\r\n\r\n <rdt-menu-overlay\r\n *ngIf=\"item.items\"\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expanded\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n [preferredVerticalDir]=\"preferredVerticalDir\"\r\n [level]=\"0\"\r\n [anchorElement]=\"anchorEl\"\r\n />\r\n </li>\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;border:none;text-decoration:none}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--sub-menu-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;padding-left:0}.menu-bar-item{cursor:pointer;pointer-events:all;color:var(--white);margin:0 .5rem;position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-route-active)}.menu-bar-item[aria-expanded=true] .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-expanded)}.menu-bar-item-content{display:flex;align-items:center;padding:var(--rdt-menu-bar-item-padding);color:inherit!important;border-radius:var(--rdt-menu-bar-item-border-radius);overflow:hidden;background-color:var(--rdt-menu-bar-item-background)}.menu-bar-item-content:hover{background-color:var(--rdt-menu-bar-item-background-hover)}.menu-bar-item-content.focus-visible:focus,.menu-bar-item-content:focus-visible{outline:none;background-color:var(--rdt-menu-bar-item-background-focus)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["anyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1158
1196
|
}
|
|
1159
1197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
|
|
1160
1198
|
type: Component,
|
|
@@ -1163,7 +1201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1163
1201
|
provide: RdtMenuBaseComponent,
|
|
1164
1202
|
useExisting: RdtMenuBarComponent,
|
|
1165
1203
|
},
|
|
1166
|
-
], template: "<ul class=\"menu-bar-item-container\" role=\"presentation\">\r\n <li\r\n *ngFor=\"let item of parsedItems; let i = index\"\r\n class=\"menu-bar-item\"\r\n role=\"presentation\"\r\n rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n #anchorEl\r\n >\r\n <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n <button\r\n #focusableItem\r\n class=\"menu-bar-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"item === expanded\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n\r\n <div class=\"menu-bar-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO\r\n <
|
|
1204
|
+
], template: "<ul class=\"menu-bar-item-container\" role=\"presentation\">\r\n <li\r\n *ngFor=\"let item of parsedItems; let i = index\"\r\n class=\"menu-bar-item\"\r\n role=\"presentation\"\r\n rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n #anchorEl\r\n >\r\n <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n <button\r\n #focusableItem\r\n class=\"menu-bar-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n (pointerenter)=\"onItemPointerEnter(item)\"\r\n (pointerleave)=\"onItemPointerLeave(item)\"\r\n [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"item === expanded\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n\r\n <div class=\"menu-bar-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!-- TODO\r\n <rdt-icon\r\n *ngIf=\"item.items\"\r\n name=\"expand_more\"\r\n class=\"menu-bar-item-icon\"\r\n inverted\r\n />\r\n <rdt-icon\r\n *ngIf=\"item.icon\"\r\n [name]=\"item.icon\"\r\n class=\"menu-bar-item-icon\"\r\n inverted\r\n />\r\n -->\r\n <span class=\"menu-bar-item-icon\" *ngIf=\"item.items\">v</span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-template #linkBody let-item>\r\n {{ item.label }}\r\n\r\n <div class=\"menu-bar-item-right-content\">\r\n <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n <!--\r\n <rdt-icon\r\n *ngIf=\"item.icon\"\r\n [name]=\"item.icon\"\r\n class=\"menu-bar-item-icon\"\r\n inverted\r\n />\r\n --></div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"item.routerLink\">\r\n <a\r\n #focusableItem\r\n class=\"menu-bar-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [routerLink]=\"item.routerLink\"\r\n [target]=\"item.target!\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n />\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"item.externalLink\">\r\n <a\r\n #focusableItem\r\n class=\"menu-bar-item-content\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item)\"\r\n [href]=\"item.externalLink\"\r\n [target]=\"item.target\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n />\r\n </a>\r\n </ng-container>\r\n\r\n <rdt-menu-overlay\r\n *ngIf=\"item.items\"\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expanded\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n [preferredVerticalDir]=\"preferredVerticalDir\"\r\n [level]=\"0\"\r\n [anchorElement]=\"anchorEl\"\r\n />\r\n </li>\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;border:none;text-decoration:none}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--sub-menu-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;padding-left:0}.menu-bar-item{cursor:pointer;pointer-events:all;color:var(--white);margin:0 .5rem;position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-route-active)}.menu-bar-item[aria-expanded=true] .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-expanded)}.menu-bar-item-content{display:flex;align-items:center;padding:var(--rdt-menu-bar-item-padding);color:inherit!important;border-radius:var(--rdt-menu-bar-item-border-radius);overflow:hidden;background-color:var(--rdt-menu-bar-item-background)}.menu-bar-item-content:hover{background-color:var(--rdt-menu-bar-item-background-hover)}.menu-bar-item-content.focus-visible:focus,.menu-bar-item-content:focus-visible{outline:none;background-color:var(--rdt-menu-bar-item-background-focus)}\n"] }]
|
|
1167
1205
|
}], propDecorators: { items: [{
|
|
1168
1206
|
type: Input
|
|
1169
1207
|
}], headerHeight: [{
|
|
@@ -1184,7 +1222,8 @@ class RdtMenuModule {
|
|
|
1184
1222
|
RdtMenuBarComponent], imports: [CommonModule,
|
|
1185
1223
|
RouterModule,
|
|
1186
1224
|
RdtAnyRouteActiveDirective,
|
|
1187
|
-
RdtKeyListenerDirective
|
|
1225
|
+
RdtKeyListenerDirective,
|
|
1226
|
+
RdtButtonOutletDirective], exports: [RdtMenuComponent, RdtMenuBarComponent] });
|
|
1188
1227
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, imports: [CommonModule,
|
|
1189
1228
|
RouterModule] });
|
|
1190
1229
|
}
|
|
@@ -1196,6 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1196
1235
|
RouterModule,
|
|
1197
1236
|
RdtAnyRouteActiveDirective,
|
|
1198
1237
|
RdtKeyListenerDirective,
|
|
1238
|
+
RdtButtonOutletDirective,
|
|
1199
1239
|
],
|
|
1200
1240
|
declarations: [
|
|
1201
1241
|
RdtMenuOverlayComponent,
|