@ngrdt/menu 0.0.97 → 0.0.99
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/fesm2022/ngrdt-menu.mjs +190 -73
- package/fesm2022/ngrdt-menu.mjs.map +1 -1
- package/package.json +12 -11
- package/{index.d.ts → types/ngrdt-menu.d.ts} +29 -1
package/fesm2022/ngrdt-menu.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, computed, untracked, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, input, linkedSignal, signal, afterRenderEffect, effect, afterNextRender, HostListener, ViewChild, ViewChildren, ChangeDetectionStrategy, Component, booleanAttribute, numberAttribute, EnvironmentInjector, Directive, ViewEncapsulation, QueryList, NgModule } from '@angular/core';
|
|
2
|
+
import { InjectionToken, computed, untracked, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, input, linkedSignal, signal, afterRenderEffect, effect, afterNextRender, HostListener, ViewChild, ViewChildren, ChangeDetectionStrategy, Component, booleanAttribute, numberAttribute, EnvironmentInjector, Directive, ViewEncapsulation, QueryList, NgModule, contentChild } from '@angular/core';
|
|
3
3
|
import * as i5 from '@ngrdt/icon';
|
|
4
4
|
import { RdtIconRegistryService, RdtIcon, RdtIconOutletDirective } from '@ngrdt/icon';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
@@ -13,7 +13,7 @@ import * as i4 from '@ngrdt/shortcuts';
|
|
|
13
13
|
import { RdtShortcutService, RdtShortcut, RdtKeyListenerDirective } from '@ngrdt/shortcuts';
|
|
14
14
|
import { RdtStringUtils, KB_CODE, RdtObjectUtils } from '@ngrdt/utils';
|
|
15
15
|
import { delay, of, map, first, merge, fromEvent, throttleTime, animationFrameScheduler, switchMap, withLatestFrom } from 'rxjs';
|
|
16
|
-
import { RDT_BUTTON_BASE_PROVIDER } from '@ngrdt/button';
|
|
16
|
+
import { RDT_BUTTON_BASE_PROVIDER, RdtButtonOutletDirective } from '@ngrdt/button';
|
|
17
17
|
|
|
18
18
|
var RdtMenuShortcutMode;
|
|
19
19
|
(function (RdtMenuShortcutMode) {
|
|
@@ -59,7 +59,7 @@ function parseMenuItems(items, injector, prefix = '') {
|
|
|
59
59
|
if (parsedChildren.length > 0) {
|
|
60
60
|
childrenRes.items = parsedChildren;
|
|
61
61
|
childrenRes.disabled = computed(() => item.disabled?.() === true ||
|
|
62
|
-
parsedChildren.every((c) => c.disabled()));
|
|
62
|
+
parsedChildren.every((c) => c.disabled()), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
63
63
|
}
|
|
64
64
|
return childrenRes;
|
|
65
65
|
}
|
|
@@ -203,25 +203,21 @@ class RdtMenuOverlayComponent {
|
|
|
203
203
|
children;
|
|
204
204
|
focusableElements;
|
|
205
205
|
menuItemContainer;
|
|
206
|
-
item = input.required();
|
|
207
|
-
level = input.required();
|
|
208
|
-
preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR);
|
|
209
|
-
preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR);
|
|
210
|
-
expandedInput = input(false, { alias: 'expanded' });
|
|
211
|
-
expanded = linkedSignal(() => this.expandedInput());
|
|
212
|
-
autofocusItemInput = input(null, {
|
|
213
|
-
|
|
214
|
-
});
|
|
215
|
-
autofocusItem = linkedSignal(() => this.autofocusItemInput());
|
|
206
|
+
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
207
|
+
level = input.required(...(ngDevMode ? [{ debugName: "level" }] : []));
|
|
208
|
+
preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR, ...(ngDevMode ? [{ debugName: "preferredHorizontalDir" }] : []));
|
|
209
|
+
preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR, ...(ngDevMode ? [{ debugName: "preferredVerticalDir" }] : []));
|
|
210
|
+
expandedInput = input(false, { ...(ngDevMode ? { debugName: "expandedInput" } : {}), alias: 'expanded' });
|
|
211
|
+
expanded = linkedSignal(() => this.expandedInput(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
212
|
+
autofocusItemInput = input(null, { ...(ngDevMode ? { debugName: "autofocusItemInput" } : {}), alias: 'autofocusItem' });
|
|
213
|
+
autofocusItem = linkedSignal(() => this.autofocusItemInput(), ...(ngDevMode ? [{ debugName: "autofocusItem" }] : []));
|
|
216
214
|
// Element used to relatively position menu,
|
|
217
215
|
// typically parent element.
|
|
218
216
|
// If not specified, parent element is used.
|
|
219
|
-
anchorElementInput = input(null, {
|
|
220
|
-
|
|
221
|
-
});
|
|
222
|
-
|
|
223
|
-
zIndex = computed(() => this.level() + 10);
|
|
224
|
-
isRootLevel = computed(() => this.level() === 0);
|
|
217
|
+
anchorElementInput = input(null, { ...(ngDevMode ? { debugName: "anchorElementInput" } : {}), alias: 'anchorElement' });
|
|
218
|
+
anchorElement = computed(() => this.anchorElementInput() ?? this.elRef.nativeElement.parentElement, ...(ngDevMode ? [{ debugName: "anchorElement" }] : []));
|
|
219
|
+
zIndex = computed(() => this.level() + 10, ...(ngDevMode ? [{ debugName: "zIndex" }] : []));
|
|
220
|
+
isRootLevel = computed(() => this.level() === 0, ...(ngDevMode ? [{ debugName: "isRootLevel" }] : []));
|
|
225
221
|
// Bounding box of this excluding any extra offset.
|
|
226
222
|
_box;
|
|
227
223
|
get box() {
|
|
@@ -231,14 +227,10 @@ class RdtMenuOverlayComponent {
|
|
|
231
227
|
_anchorBox;
|
|
232
228
|
_containerPadding = { top: 0, bottom: 0 };
|
|
233
229
|
// Currently applied vertical and horizontal directions.
|
|
234
|
-
verticalDir = signal(null, {
|
|
235
|
-
|
|
236
|
-
});
|
|
237
|
-
|
|
238
|
-
equal: areHorDirsEqual,
|
|
239
|
-
});
|
|
240
|
-
expandedChild = signal(null);
|
|
241
|
-
autofocusSubmenuItem = signal(null);
|
|
230
|
+
verticalDir = signal(null, { ...(ngDevMode ? { debugName: "verticalDir" } : {}), equal: areVertDirsEqual });
|
|
231
|
+
horizontalDir = signal(null, { ...(ngDevMode ? { debugName: "horizontalDir" } : {}), equal: areHorDirsEqual });
|
|
232
|
+
expandedChild = signal(null, ...(ngDevMode ? [{ debugName: "expandedChild" }] : []));
|
|
233
|
+
autofocusSubmenuItem = signal(null, ...(ngDevMode ? [{ debugName: "autofocusSubmenuItem" }] : []));
|
|
242
234
|
keyActions = {
|
|
243
235
|
[KB_CODE.ARROW.UP]: (index) => this.focusPrevItem(index),
|
|
244
236
|
[KB_CODE.ARROW.DOWN]: (index) => this.focusNextItem(index),
|
|
@@ -268,7 +260,7 @@ class RdtMenuOverlayComponent {
|
|
|
268
260
|
if (!this.expanded()) {
|
|
269
261
|
this.expandedChild.set(null);
|
|
270
262
|
}
|
|
271
|
-
});
|
|
263
|
+
}, ...(ngDevMode ? [{ debugName: "expandedEffect" }] : []));
|
|
272
264
|
expandedFocusEffect = afterRenderEffect(() => {
|
|
273
265
|
const rootItem = untracked(this.item);
|
|
274
266
|
this.expandedInput();
|
|
@@ -570,7 +562,7 @@ class RdtMenuOverlayComponent {
|
|
|
570
562
|
const isRoot = untracked(this.isRootLevel);
|
|
571
563
|
let left;
|
|
572
564
|
let right;
|
|
573
|
-
// This menu is directly under
|
|
565
|
+
// This menu is directly under sidemenu
|
|
574
566
|
if (isRoot) {
|
|
575
567
|
left = this._anchorBox.right - this._box.width;
|
|
576
568
|
right =
|
|
@@ -741,10 +733,10 @@ class RdtMenuOverlayComponent {
|
|
|
741
733
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
742
734
|
.subscribe((event) => this.onTabKeyPress(event));
|
|
743
735
|
}
|
|
744
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
745
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
736
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtMenuOverlayComponent, isStandalone: false, selector: "rdt-menu-overlay", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: true, transformFunction: null }, preferredHorizontalDir: { classPropertyName: "preferredHorizontalDir", publicName: "preferredHorizontalDir", isSignal: true, isRequired: false, transformFunction: null }, preferredVerticalDir: { classPropertyName: "preferredVerticalDir", publicName: "preferredVerticalDir", isSignal: true, isRequired: false, transformFunction: null }, expandedInput: { classPropertyName: "expandedInput", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, autofocusItemInput: { classPropertyName: "autofocusItemInput", publicName: "autofocusItem", isSignal: true, isRequired: false, transformFunction: null }, anchorElementInput: { classPropertyName: "anchorElementInput", publicName: "anchorElement", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1", "role": "menu" }, listeners: { "window:focusout": "checkActiveElement($event)" }, properties: { "class.expanded": "expanded()", "style.z-index": "zIndex()" } }, viewQueries: [{ propertyName: "menuItemContainer", first: true, predicate: ["menuItemContainer"], descendants: true }, { propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], ngImport: i0, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n @for(item of item().items; track item.dataTestId; let i = $index) {\r\n <li\r\n role=\"presentation\"\r\n class=\"menu-item\"\r\n (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n (pointerenter)=\"onItemPointerEnter(item)\"\r\n rdtAnyRouteActive=\"menu-item-route-active\"\r\n [watchedRoutes]=\"getChildRoutes(item)\"\r\n #anchorEl\r\n >\r\n @if(!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 [disabled]=\"item.disabled()\"\r\n [ariaDisabled]=\"item.disabled()\"\r\n [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n [ariaExpanded]=\"item === expandedChild()?.item\"\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 @if (item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if (item.items) { @if (arrowRightIcon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: arrowRightIcon }\"\r\n ></ng-container>\r\n } @else {\r\n <span class=\"menu-item-icon rdt-menu-icon-right\"></span>\r\n } } @else if (item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </button>\r\n }\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 @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n }\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 @if (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 } @if (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 }\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 @if (item.items && expanded()) {\r\n <rdt-menu-overlay\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expandedChild()?.item\"\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 }\r\n </li>\r\n }\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);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px))}:host.expanded{visibility:visible}ul.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-background);margin-top:0;margin-bottom:0;margin-block-start:0;margin-block-end:0}.menu-item-content{cursor:pointer;display:flex;align-items:center;width:100%;padding:var(--rdt-menu-item-padding);background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color);font-size:var(--rdt-menu-item-font-size);font-weight:var(--rdt-menu-item-font-weight);border:var(--rdt-menu-item-border);outline:var(--rdt-menu-item-outline)}.menu-item{display:flex;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-route-active-background);--rdt-menu-item-text-color: var(--rdt-menu-item-route-active-text-color);--rdt-menu-item-border: var(--rdt-menu-item-route-active-border);--rdt-menu-item-outline: var(--rdt-menu-item-route-active-outline)}.menu-item .menu-item-content:hover{--rdt-menu-item-background: var(--rdt-menu-item-hover-background);--rdt-menu-item-text-color: var(--rdt-menu-item-hover-text-color);--rdt-menu-item-border: var(--rdt-menu-item-hover-border);--rdt-menu-item-outline: var(--rdt-menu-item-hover-outline)}.menu-item .menu-item-content[aria-expanded=true]{--rdt-menu-item-background: var(--rdt-menu-item-expanded-background);--rdt-menu-item-text-color: var(--rdt-menu-item-expanded-text-color);--rdt-menu-item-border: var(--rdt-menu-item-expanded-border);--rdt-menu-item-outline: var(--rdt-menu-item-expanded-outline)}.menu-item .menu-item-content.focus-visible:focus,.menu-item .menu-item-content:focus-visible{--rdt-menu-item-background: var(--rdt-menu-item-focus-background);--rdt-menu-item-text-color: var(--rdt-menu-item-focus-text-color);--rdt-menu-item-border: var(--rdt-menu-item-focus-border);--rdt-menu-item-outline: var(--rdt-menu-item-focus-outline)}.menu-item .menu-item-content[disabled]{--rdt-menu-item-background: var(--rdt-menu-item-disabled-background);--rdt-menu-item-text-color: var(--rdt-menu-item-disabled-text-color);--rdt-menu-item-border: var(--rdt-menu-item-disabled-border);--rdt-menu-item-outline: var(--rdt-menu-item-disabled-outline);cursor:not-allowed}.menu-item-icon.rdt-menu-icon-right{width:0;height:0;border-top:var(--rdt-menu-default-icon-size) solid transparent;border-bottom:var(--rdt-menu-default-icon-size) solid transparent;border-left:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-item-text-color)}\n"], dependencies: [{ 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: ["rdtAnyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "directive", type: i5.RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
746
738
|
}
|
|
747
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuOverlayComponent, decorators: [{
|
|
748
740
|
type: Component,
|
|
749
741
|
args: [{ selector: 'rdt-menu-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
|
|
750
742
|
'[class.expanded]': 'expanded()',
|
|
@@ -761,22 +753,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
761
753
|
}], menuItemContainer: [{
|
|
762
754
|
type: ViewChild,
|
|
763
755
|
args: ['menuItemContainer']
|
|
764
|
-
}], checkActiveElement: [{
|
|
756
|
+
}], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: true }] }], preferredHorizontalDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredHorizontalDir", required: false }] }], preferredVerticalDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredVerticalDir", required: false }] }], expandedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], autofocusItemInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusItem", required: false }] }], anchorElementInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorElement", required: false }] }], checkActiveElement: [{
|
|
765
757
|
type: HostListener,
|
|
766
758
|
args: ['window:focusout', ['$event']]
|
|
767
759
|
}] } });
|
|
768
760
|
|
|
769
761
|
class RdtMenuBaseComponent {
|
|
770
|
-
preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR);
|
|
771
|
-
preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR);
|
|
762
|
+
preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR, ...(ngDevMode ? [{ debugName: "preferredVerticalDir" }] : []));
|
|
763
|
+
preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR, ...(ngDevMode ? [{ debugName: "preferredHorizontalDir" }] : []));
|
|
772
764
|
// Mode only matters if item has shortcut and only children, no command nor routerLink
|
|
773
765
|
// FOCUS_ITEM will put focus on item with shortcut
|
|
774
766
|
// OPEN_SUBMENU will open its submenu and put focus on the first item in it
|
|
775
767
|
// If item has command or routerLink, it will always be activated and everything closed
|
|
776
|
-
shortcutMode = input(RdtMenuShortcutMode.OPEN_SUBMENU);
|
|
777
|
-
closeOnFocusOut = input(false, { transform: booleanAttribute });
|
|
778
|
-
openOnHover = input(false, { transform: booleanAttribute });
|
|
779
|
-
hitboxMargin = input(10, { transform: numberAttribute });
|
|
768
|
+
shortcutMode = input(RdtMenuShortcutMode.OPEN_SUBMENU, ...(ngDevMode ? [{ debugName: "shortcutMode" }] : []));
|
|
769
|
+
closeOnFocusOut = input(false, { ...(ngDevMode ? { debugName: "closeOnFocusOut" } : {}), transform: booleanAttribute });
|
|
770
|
+
openOnHover = input(false, { ...(ngDevMode ? { debugName: "openOnHover" } : {}), transform: booleanAttribute });
|
|
771
|
+
hitboxMargin = input(10, { ...(ngDevMode ? { debugName: "hitboxMargin" } : {}), transform: numberAttribute });
|
|
780
772
|
cd = inject(ChangeDetectorRef);
|
|
781
773
|
destroyRef = inject(DestroyRef);
|
|
782
774
|
rdtRouter = inject(RdtRouterService);
|
|
@@ -789,7 +781,7 @@ class RdtMenuBaseComponent {
|
|
|
789
781
|
iconRegistry = inject(RdtIconRegistryService);
|
|
790
782
|
children;
|
|
791
783
|
focusableElements;
|
|
792
|
-
expandedChild = signal(null);
|
|
784
|
+
expandedChild = signal(null, ...(ngDevMode ? [{ debugName: "expandedChild" }] : []));
|
|
793
785
|
autofocusSubmenuItem = null;
|
|
794
786
|
filteredItems = computed(() => {
|
|
795
787
|
this.navigationEnd();
|
|
@@ -801,7 +793,7 @@ class RdtMenuBaseComponent {
|
|
|
801
793
|
else {
|
|
802
794
|
return this.filterRec(items, current);
|
|
803
795
|
}
|
|
804
|
-
});
|
|
796
|
+
}, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
|
|
805
797
|
get clientSize() {
|
|
806
798
|
return this._windowSize;
|
|
807
799
|
}
|
|
@@ -814,7 +806,7 @@ class RdtMenuBaseComponent {
|
|
|
814
806
|
return this._buttonContainerRect;
|
|
815
807
|
}
|
|
816
808
|
_buttonContainerRect;
|
|
817
|
-
childRoutesMap = computed(() => getChildRoutesMap(this.filteredItems()));
|
|
809
|
+
childRoutesMap = computed(() => getChildRoutesMap(this.filteredItems()), ...(ngDevMode ? [{ debugName: "childRoutesMap" }] : []));
|
|
818
810
|
keyActions = {
|
|
819
811
|
[KB_CODE.ARROW.LEFT]: (index) => this.focusPrevItem(index),
|
|
820
812
|
[KB_CODE.ARROW.RIGHT]: (index) => this.focusNextItem(index),
|
|
@@ -842,7 +834,7 @@ class RdtMenuBaseComponent {
|
|
|
842
834
|
this.recalculateChildren();
|
|
843
835
|
}, 1000);
|
|
844
836
|
}
|
|
845
|
-
recalcChildrenEffect = effect(() => this.recalculateChildren());
|
|
837
|
+
recalcChildrenEffect = effect(() => this.recalculateChildren(), ...(ngDevMode ? [{ debugName: "recalcChildrenEffect" }] : []));
|
|
846
838
|
recalculateChildren() {
|
|
847
839
|
const preferredH = this.preferredHorizontalDir();
|
|
848
840
|
const preferredV = this.preferredVerticalDir();
|
|
@@ -1184,10 +1176,10 @@ class RdtMenuBaseComponent {
|
|
|
1184
1176
|
}
|
|
1185
1177
|
return false;
|
|
1186
1178
|
}
|
|
1187
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1188
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1180
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: RdtMenuBaseComponent, isStandalone: true, inputs: { preferredVerticalDir: { classPropertyName: "preferredVerticalDir", publicName: "preferredVerticalDir", isSignal: true, isRequired: false, transformFunction: null }, preferredHorizontalDir: { classPropertyName: "preferredHorizontalDir", publicName: "preferredHorizontalDir", isSignal: true, isRequired: false, transformFunction: null }, shortcutMode: { classPropertyName: "shortcutMode", publicName: "shortcutMode", isSignal: true, isRequired: false, transformFunction: null }, closeOnFocusOut: { classPropertyName: "closeOnFocusOut", publicName: "closeOnFocusOut", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, hitboxMargin: { classPropertyName: "hitboxMargin", publicName: "hitboxMargin", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:pointermove": "onPointerMove($event)", "document:click": "onDocumentClick($event)", "window:focusout": "checkActiveElement($event)" }, classAttribute: "rdt-menu-base" }, viewQueries: [{ propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], ngImport: i0 });
|
|
1189
1181
|
}
|
|
1190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuBaseComponent, decorators: [{
|
|
1191
1183
|
type: Directive,
|
|
1192
1184
|
args: [{
|
|
1193
1185
|
host: {
|
|
@@ -1197,7 +1189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
1197
1189
|
'(window:focusout)': 'checkActiveElement($event)',
|
|
1198
1190
|
},
|
|
1199
1191
|
}]
|
|
1200
|
-
}], ctorParameters: () => [], propDecorators: { children: [{
|
|
1192
|
+
}], ctorParameters: () => [], propDecorators: { preferredVerticalDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredVerticalDir", required: false }] }], preferredHorizontalDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredHorizontalDir", required: false }] }], shortcutMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcutMode", required: false }] }], closeOnFocusOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnFocusOut", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }], hitboxMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "hitboxMargin", required: false }] }], children: [{
|
|
1201
1193
|
type: ViewChildren,
|
|
1202
1194
|
args: [RdtMenuOverlayComponent]
|
|
1203
1195
|
}], focusableElements: [{
|
|
@@ -1211,19 +1203,19 @@ class RdtMenuBarComponent extends RdtMenuBaseComponent {
|
|
|
1211
1203
|
get buttonContainer() {
|
|
1212
1204
|
return this.buttonContainerRef?.nativeElement;
|
|
1213
1205
|
}
|
|
1214
|
-
items = input.required();
|
|
1215
|
-
allParsedItems = computed(() => parseMenuItems(this.items(), this.injector));
|
|
1216
|
-
headerHeight = input(0, { transform: numberAttribute });
|
|
1217
|
-
footerHeight = input(0, { transform: numberAttribute });
|
|
1218
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1206
|
+
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
1207
|
+
allParsedItems = computed(() => parseMenuItems(this.items(), this.injector), ...(ngDevMode ? [{ debugName: "allParsedItems" }] : []));
|
|
1208
|
+
headerHeight = input(0, { ...(ngDevMode ? { debugName: "headerHeight" } : {}), transform: numberAttribute });
|
|
1209
|
+
footerHeight = input(0, { ...(ngDevMode ? { debugName: "footerHeight" } : {}), transform: numberAttribute });
|
|
1210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtMenuBarComponent, isStandalone: false, selector: "rdt-menu-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menubar" } }, providers: [
|
|
1220
1212
|
{
|
|
1221
1213
|
provide: RdtMenuBaseComponent,
|
|
1222
1214
|
useExisting: RdtMenuBarComponent,
|
|
1223
1215
|
},
|
|
1224
|
-
], viewQueries: [{ propertyName: "buttonContainerRef", first: true, predicate: ["buttonContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n @for(item of filteredItems(); track item.dataTestId; let i = $index) {\r\n <li\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 @if(!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 [disabled]=\"item.disabled()\"\r\n [ariaDisabled]=\"item.disabled()\"\r\n [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n [ariaExpanded]=\"item === expandedChild()?.item\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n {{ item.icon }}\r\n <div class=\"menu-bar-item-right-content\">\r\n @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if(item.items) { @if (arrowDownIcon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: arrowDownIcon }\"\r\n ></ng-container>\r\n } @else {\r\n <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n } } @else if (item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </button>\r\n }\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 @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if(item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @if(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 } @if(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 } @if (item.items) {\r\n <rdt-menu-overlay\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expandedChild()?.item\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n [level]=\"0\"\r\n [anchorElement]=\"anchorEl\"\r\n />\r\n }\r\n </li>\r\n }\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;text-decoration:none;box-sizing:border-box}.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-root
|
|
1216
|
+
], viewQueries: [{ propertyName: "buttonContainerRef", first: true, predicate: ["buttonContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n @for(item of filteredItems(); track item.dataTestId; let i = $index) {\r\n <li\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 @if(!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 [disabled]=\"item.disabled()\"\r\n [ariaDisabled]=\"item.disabled()\"\r\n [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n [ariaExpanded]=\"item === expandedChild()?.item\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n {{ item.icon }}\r\n <div class=\"menu-bar-item-right-content\">\r\n @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if(item.items) { @if (arrowDownIcon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: arrowDownIcon }\"\r\n ></ng-container>\r\n } @else {\r\n <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n } } @else if (item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </button>\r\n }\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 @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if(item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @if(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 } @if(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 } @if (item.items) {\r\n <rdt-menu-overlay\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expandedChild()?.item\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n [level]=\"0\"\r\n [anchorElement]=\"anchorEl\"\r\n />\r\n }\r\n </li>\r\n }\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;text-decoration:none;box-sizing:border-box}.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-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-root{margin-left:0}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--rdt-menu-bar-padding)}.menu-bar-item-container{display:flex;flex-wrap:wrap;list-style-type:none;margin-bottom:0;margin-top:0;margin-block-start:0;margin-block-end:0;padding-left:0}.menu-bar-item{pointer-events:all;margin:var(--rdt-menu-bar-item-margin);position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-route-active-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-route-active-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-route-active-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-route-active-outline)}.menu-bar-item [aria-expanded=true].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-expanded-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-expanded-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-expanded-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-expanded-outline)}.menu-bar-item [disabled].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-disabled-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-disabled-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-disabled-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-disabled-outline);cursor:not-allowed}.menu-bar-item-content{cursor:pointer;display:flex;align-items:center;overflow:hidden;padding:var(--rdt-menu-bar-item-padding);border-radius:var(--rdt-menu-bar-item-border-radius);border:var(--rdt-menu-bar-item-border);background-color:var(--rdt-menu-bar-item-background);color:var(--rdt-menu-bar-item-text-color);font-weight:var(--rdt-menu-bar-item-font-weight);font-size:var(--rdt-menu-bar-item-font-size, inherit);outline:var(--rdt-menu-bar-item-outline)}.menu-bar-item-content:hover:not([disabled]){--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-hover-outline)}.menu-bar-item .menu-bar-item-content:not([disabled]).focus-visible:focus,.menu-bar-item .menu-bar-item-content:not([disabled]):focus-visible{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-focus-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-focus-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-focus-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-focus-outline)}.menu-bar-item-icon.rdt-menu-icon-down{width:0;height:0;border-left:var(--rdt-menu-default-icon-size) solid transparent;border-right:var(--rdt-menu-default-icon-size) solid transparent;border-top:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-bar-item-text-color)}\n"], dependencies: [{ 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: ["rdtAnyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "directive", type: i5.RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1225
1217
|
}
|
|
1226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
|
|
1227
1219
|
type: Component,
|
|
1228
1220
|
args: [{ selector: 'rdt-menu-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1229
1221
|
{
|
|
@@ -1232,16 +1224,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
1232
1224
|
},
|
|
1233
1225
|
], standalone: false, host: {
|
|
1234
1226
|
role: 'menubar',
|
|
1235
|
-
}, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n @for(item of filteredItems(); track item.dataTestId; let i = $index) {\r\n <li\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 @if(!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 [disabled]=\"item.disabled()\"\r\n [ariaDisabled]=\"item.disabled()\"\r\n [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n [ariaExpanded]=\"item === expandedChild()?.item\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n {{ item.icon }}\r\n <div class=\"menu-bar-item-right-content\">\r\n @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if(item.items) { @if (arrowDownIcon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: arrowDownIcon }\"\r\n ></ng-container>\r\n } @else {\r\n <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n } } @else if (item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </button>\r\n }\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 @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if(item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @if(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 } @if(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 } @if (item.items) {\r\n <rdt-menu-overlay\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expandedChild()?.item\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n [level]=\"0\"\r\n [anchorElement]=\"anchorEl\"\r\n />\r\n }\r\n </li>\r\n }\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;text-decoration:none;box-sizing:border-box}.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-root
|
|
1227
|
+
}, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n @for(item of filteredItems(); track item.dataTestId; let i = $index) {\r\n <li\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 @if(!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 [disabled]=\"item.disabled()\"\r\n [ariaDisabled]=\"item.disabled()\"\r\n [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n [ariaExpanded]=\"item === expandedChild()?.item\"\r\n [attr.tabindex]=\"0\"\r\n [attr.data-testid]=\"item.dataTestId\"\r\n >\r\n {{ item.label }}\r\n {{ item.icon }}\r\n <div class=\"menu-bar-item-right-content\">\r\n @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if(item.items) { @if (arrowDownIcon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: arrowDownIcon }\"\r\n ></ng-container>\r\n } @else {\r\n <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n } } @else if (item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </button>\r\n }\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 @if(item.shortcut) {\r\n <span class=\"menu-item-shortcut\">\r\n {{ item.shortcut.label }}\r\n </span>\r\n } @if(item.icon) {\r\n <ng-container\r\n rdtIconOutlet\r\n [inputs]=\"{ name: item.icon }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @if(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 } @if(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 } @if (item.items) {\r\n <rdt-menu-overlay\r\n [item]=\"$any(item)\"\r\n [expanded]=\"item === expandedChild()?.item\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n [level]=\"0\"\r\n [anchorElement]=\"anchorEl\"\r\n />\r\n }\r\n </li>\r\n }\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;text-decoration:none;box-sizing:border-box}.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-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-root{margin-left:0}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--rdt-menu-bar-padding)}.menu-bar-item-container{display:flex;flex-wrap:wrap;list-style-type:none;margin-bottom:0;margin-top:0;margin-block-start:0;margin-block-end:0;padding-left:0}.menu-bar-item{pointer-events:all;margin:var(--rdt-menu-bar-item-margin);position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-route-active-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-route-active-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-route-active-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-route-active-outline)}.menu-bar-item [aria-expanded=true].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-expanded-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-expanded-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-expanded-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-expanded-outline)}.menu-bar-item [disabled].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-disabled-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-disabled-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-disabled-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-disabled-outline);cursor:not-allowed}.menu-bar-item-content{cursor:pointer;display:flex;align-items:center;overflow:hidden;padding:var(--rdt-menu-bar-item-padding);border-radius:var(--rdt-menu-bar-item-border-radius);border:var(--rdt-menu-bar-item-border);background-color:var(--rdt-menu-bar-item-background);color:var(--rdt-menu-bar-item-text-color);font-weight:var(--rdt-menu-bar-item-font-weight);font-size:var(--rdt-menu-bar-item-font-size, inherit);outline:var(--rdt-menu-bar-item-outline)}.menu-bar-item-content:hover:not([disabled]){--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-hover-outline)}.menu-bar-item .menu-bar-item-content:not([disabled]).focus-visible:focus,.menu-bar-item .menu-bar-item-content:not([disabled]):focus-visible{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-focus-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-focus-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-focus-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-focus-outline)}.menu-bar-item-icon.rdt-menu-icon-down{width:0;height:0;border-left:var(--rdt-menu-default-icon-size) solid transparent;border-right:var(--rdt-menu-default-icon-size) solid transparent;border-top:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-bar-item-text-color)}\n"] }]
|
|
1236
1228
|
}], propDecorators: { buttonContainerRef: [{
|
|
1237
1229
|
type: ViewChild,
|
|
1238
1230
|
args: ['buttonContainer', { static: true }]
|
|
1239
|
-
}] } });
|
|
1231
|
+
}], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], footerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerHeight", required: false }] }] } });
|
|
1240
1232
|
|
|
1241
1233
|
class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
1242
1234
|
buttonClass = inject(RDT_BUTTON_BASE_PROVIDER);
|
|
1243
|
-
trigger = input.required();
|
|
1244
|
-
items = input.required();
|
|
1235
|
+
trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : []));
|
|
1236
|
+
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
1245
1237
|
allParsedItems = computed(() => {
|
|
1246
1238
|
const items = this.items();
|
|
1247
1239
|
const wrapper = {
|
|
@@ -1250,7 +1242,7 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1250
1242
|
items: items,
|
|
1251
1243
|
};
|
|
1252
1244
|
return parseMenuItems([wrapper], this.injector);
|
|
1253
|
-
});
|
|
1245
|
+
}, ...(ngDevMode ? [{ debugName: "allParsedItems" }] : []));
|
|
1254
1246
|
focusableElements = new QueryList();
|
|
1255
1247
|
get buttonContainer() {
|
|
1256
1248
|
return this.anchorElement() ?? undefined;
|
|
@@ -1272,7 +1264,7 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1272
1264
|
triggerTabIndexEffect = effect(() => {
|
|
1273
1265
|
const trigger = this.trigger();
|
|
1274
1266
|
trigger.tabIndex.set(0);
|
|
1275
|
-
});
|
|
1267
|
+
}, ...(ngDevMode ? [{ debugName: "triggerTabIndexEffect" }] : []));
|
|
1276
1268
|
triggerAriaEffect = effect(() => {
|
|
1277
1269
|
const trigger = this.trigger();
|
|
1278
1270
|
const expandedChild = this.expandedChild();
|
|
@@ -1281,7 +1273,7 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1281
1273
|
'aria-haspopup': 'true',
|
|
1282
1274
|
'aria-expanded': expandedChild?.item === this.parsedItem,
|
|
1283
1275
|
});
|
|
1284
|
-
});
|
|
1276
|
+
}, ...(ngDevMode ? [{ debugName: "triggerAriaEffect" }] : []));
|
|
1285
1277
|
subscribeClicks() {
|
|
1286
1278
|
toObservable(this.trigger)
|
|
1287
1279
|
.pipe(switchMap((trigger) => outputToObservable(trigger.click)), takeUntilDestroyed(this.destroyRef))
|
|
@@ -1304,37 +1296,37 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1304
1296
|
this.focusableElements.reset([{ nativeElement: anchor }]);
|
|
1305
1297
|
}
|
|
1306
1298
|
}
|
|
1307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1308
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1299
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1300
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtMenuComponent, isStandalone: false, selector: "rdt-menu", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
1309
1301
|
{
|
|
1310
1302
|
provide: RdtMenuBaseComponent,
|
|
1311
1303
|
useExisting: RdtMenuComponent,
|
|
1312
1304
|
},
|
|
1313
|
-
], usesInheritance: true, ngImport: i0, template: "@if (parsedItem) {\r\n<rdt-menu-overlay\r\n [anchorElement]=\"anchorElement()\"\r\n [item]=\"$any(parsedItem)\"\r\n [expanded]=\"expandedChild()?.item === parsedItem\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n [level]=\"0\"\r\n/>\r\n}\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;text-decoration:none;box-sizing:border-box}.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-root
|
|
1305
|
+
], usesInheritance: true, ngImport: i0, template: "@if (parsedItem) {\r\n<rdt-menu-overlay\r\n [anchorElement]=\"anchorElement()\"\r\n [item]=\"$any(parsedItem)\"\r\n [expanded]=\"expandedChild()?.item === parsedItem\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n [level]=\"0\"\r\n/>\r\n}\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;text-decoration:none;box-sizing:border-box}.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-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-root{margin-left:0}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu{display:block;position:relative}\n"], dependencies: [{ kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1314
1306
|
}
|
|
1315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuComponent, decorators: [{
|
|
1316
1308
|
type: Component,
|
|
1317
1309
|
args: [{ selector: 'rdt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1318
1310
|
{
|
|
1319
1311
|
provide: RdtMenuBaseComponent,
|
|
1320
1312
|
useExisting: RdtMenuComponent,
|
|
1321
1313
|
},
|
|
1322
|
-
], standalone: false, template: "@if (parsedItem) {\r\n<rdt-menu-overlay\r\n [anchorElement]=\"anchorElement()\"\r\n [item]=\"$any(parsedItem)\"\r\n [expanded]=\"expandedChild()?.item === parsedItem\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n [level]=\"0\"\r\n/>\r\n}\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;text-decoration:none;box-sizing:border-box}.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-root
|
|
1323
|
-
}], ctorParameters: () => [] });
|
|
1314
|
+
], standalone: false, template: "@if (parsedItem) {\r\n<rdt-menu-overlay\r\n [anchorElement]=\"anchorElement()\"\r\n [item]=\"$any(parsedItem)\"\r\n [expanded]=\"expandedChild()?.item === parsedItem\"\r\n [autofocusItem]=\"autofocusSubmenuItem\"\r\n [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n [level]=\"0\"\r\n/>\r\n}\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;text-decoration:none;box-sizing:border-box}.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-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-root{margin-left:0}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu{display:block;position:relative}\n"] }]
|
|
1315
|
+
}], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
|
|
1324
1316
|
|
|
1325
1317
|
class RdtMenuModule {
|
|
1326
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1327
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1318
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1319
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuModule, declarations: [RdtMenuOverlayComponent,
|
|
1328
1320
|
RdtMenuComponent,
|
|
1329
1321
|
RdtMenuBarComponent], imports: [CommonModule,
|
|
1330
1322
|
RouterModule,
|
|
1331
1323
|
RdtAnyRouteActiveDirective,
|
|
1332
1324
|
RdtKeyListenerDirective,
|
|
1333
1325
|
RdtIconOutletDirective], exports: [RdtMenuComponent, RdtMenuBarComponent] });
|
|
1334
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1326
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuModule, imports: [CommonModule,
|
|
1335
1327
|
RouterModule] });
|
|
1336
1328
|
}
|
|
1337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtMenuModule, decorators: [{
|
|
1338
1330
|
type: NgModule,
|
|
1339
1331
|
args: [{
|
|
1340
1332
|
imports: [
|
|
@@ -1353,9 +1345,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
1353
1345
|
}]
|
|
1354
1346
|
}] });
|
|
1355
1347
|
|
|
1348
|
+
const RDT_SIDEMENU = new InjectionToken('RDT_SIDEMENU');
|
|
1349
|
+
|
|
1350
|
+
function hasRoute(item) {
|
|
1351
|
+
return 'routerLink' in item && !!item.routerLink;
|
|
1352
|
+
}
|
|
1353
|
+
function hasChildren(item) {
|
|
1354
|
+
return 'items' in item && !!item.items?.length;
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
class RdtSidemenuItemComponent {
|
|
1358
|
+
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
1359
|
+
expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
1360
|
+
sidemenu = inject(RDT_SIDEMENU);
|
|
1361
|
+
iconRegistry = inject(RdtIconRegistryService);
|
|
1362
|
+
routerUrl(item) {
|
|
1363
|
+
return hasRoute(item) && item.routerLink
|
|
1364
|
+
? item.routerLink.createAbsoluteUrl()
|
|
1365
|
+
: null;
|
|
1366
|
+
}
|
|
1367
|
+
resolveIcon(item) {
|
|
1368
|
+
const icon = item.icon;
|
|
1369
|
+
if (!icon) {
|
|
1370
|
+
return null;
|
|
1371
|
+
}
|
|
1372
|
+
return this.iconRegistry.getIcon(icon);
|
|
1373
|
+
}
|
|
1374
|
+
buttonInputs = computed(() => {
|
|
1375
|
+
const item = this.item();
|
|
1376
|
+
const isExpanded = this.expanded();
|
|
1377
|
+
return {
|
|
1378
|
+
appearance: 'base',
|
|
1379
|
+
size: 's',
|
|
1380
|
+
expanded: true,
|
|
1381
|
+
label: item.label,
|
|
1382
|
+
iconStart: this.resolveIcon(item),
|
|
1383
|
+
ngHref: this.routerUrl(item),
|
|
1384
|
+
queryParams: item.queryParams ?? null,
|
|
1385
|
+
href: item.externalLink ?? null,
|
|
1386
|
+
target: item.target ?? '_blank',
|
|
1387
|
+
rdtDisabled: item.disabled?.(),
|
|
1388
|
+
aria: item.items?.length ? { 'aria-expanded': isExpanded } : {},
|
|
1389
|
+
};
|
|
1390
|
+
}, ...(ngDevMode ? [{ debugName: "buttonInputs" }] : []));
|
|
1391
|
+
onClick(item) {
|
|
1392
|
+
if (hasChildren(item)) {
|
|
1393
|
+
this.expanded.update((v) => !v);
|
|
1394
|
+
}
|
|
1395
|
+
else {
|
|
1396
|
+
item.command?.();
|
|
1397
|
+
this.sidemenu.close();
|
|
1398
|
+
}
|
|
1399
|
+
}
|
|
1400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtSidemenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtSidemenuItemComponent, isStandalone: true, selector: "rdt-sidemenu-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let it = item();\n@if (!it.visible || it.visible()) {\n <div class=\"rdt-sidemenu-item__button\">\n <ng-container\n rdtButtonOutlet\n [inputs]=\"buttonInputs()\"\n (click)=\"onClick(it)\"\n ></ng-container>\n </div>\n @if (it.items?.length && expanded()) {\n <div class=\"rdt-sidemenu-item__children\">\n @for (child of it.items; track child.label) {\n <rdt-sidemenu-item [item]=\"child\" />\n }\n </div>\n }\n}\n", styles: [".rdt-sidemenu-item__button{width:100%}.rdt-sidemenu-item__button>*{width:100%;display:block}.rdt-sidemenu-item__children{padding-left:.75rem;border-left:1px solid var(--border-subtle);margin-left:.75rem}\n"], dependencies: [{ kind: "component", type: RdtSidemenuItemComponent, selector: "rdt-sidemenu-item", inputs: ["item"] }, { kind: "directive", type: RdtButtonOutletDirective, selector: "[rdtButtonOutlet]", outputs: ["click"], exportAs: ["rdtButtonOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1402
|
+
}
|
|
1403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtSidemenuItemComponent, decorators: [{
|
|
1404
|
+
type: Component,
|
|
1405
|
+
args: [{ selector: 'rdt-sidemenu-item', standalone: true, imports: [RdtButtonOutletDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let it = item();\n@if (!it.visible || it.visible()) {\n <div class=\"rdt-sidemenu-item__button\">\n <ng-container\n rdtButtonOutlet\n [inputs]=\"buttonInputs()\"\n (click)=\"onClick(it)\"\n ></ng-container>\n </div>\n @if (it.items?.length && expanded()) {\n <div class=\"rdt-sidemenu-item__children\">\n @for (child of it.items; track child.label) {\n <rdt-sidemenu-item [item]=\"child\" />\n }\n </div>\n }\n}\n", styles: [".rdt-sidemenu-item__button{width:100%}.rdt-sidemenu-item__button>*{width:100%;display:block}.rdt-sidemenu-item__children{padding-left:.75rem;border-left:1px solid var(--border-subtle);margin-left:.75rem}\n"] }]
|
|
1406
|
+
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
|
|
1407
|
+
|
|
1408
|
+
class RdtSidemenuComponent {
|
|
1409
|
+
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
1410
|
+
width = input(240, ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
1411
|
+
opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
|
|
1412
|
+
widthCss = computed(() => {
|
|
1413
|
+
const w = this.width();
|
|
1414
|
+
return typeof w === 'number' ? `${w}px` : w;
|
|
1415
|
+
}, ...(ngDevMode ? [{ debugName: "widthCss" }] : []));
|
|
1416
|
+
open() {
|
|
1417
|
+
this.opened.set(true);
|
|
1418
|
+
}
|
|
1419
|
+
close() {
|
|
1420
|
+
this.opened.set(false);
|
|
1421
|
+
}
|
|
1422
|
+
toggle() {
|
|
1423
|
+
this.opened.update((v) => !v);
|
|
1424
|
+
}
|
|
1425
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtSidemenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1426
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtSidemenuComponent, isStandalone: true, selector: "rdt-sidemenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1427
|
+
{
|
|
1428
|
+
provide: RDT_SIDEMENU,
|
|
1429
|
+
useExisting: RdtSidemenuComponent,
|
|
1430
|
+
},
|
|
1431
|
+
], ngImport: i0, template: "<aside\n class=\"rdt-sidemenu\"\n [class.rdt-sidemenu--opened]=\"opened()\"\n [style.--rdt-sidebar-width]=\"widthCss()\"\n>\n <div class=\"rdt-sidemenu-panel\">\n <nav class=\"rdt-sidemenu-nav\">\n @for (item of items(); track item.label) {\n <rdt-sidemenu-item [item]=\"item\" />\n }\n </nav>\n <div class=\"rdt-sidemenu-content\">\n <ng-content />\n </div>\n </div>\n</aside>\n", styles: [".rdt-sidemenu{flex-shrink:0;width:0;height:100%;position:relative;transition:width .2s ease}.rdt-sidemenu .rdt-sidemenu-panel{position:absolute;top:0;bottom:0;width:var(--rdt-sidebar-width, 240px);background:var(--rdt-sidemenu-panel-bg, #fff);border-right:1px solid var(--rdt-sidemenu-panel-border-color, #dee2e6);box-shadow:2px 0 8px #0000000f;overflow:auto;z-index:4;transform:translate(-100%);transition:transform .2s ease}.rdt-sidemenu .rdt-sidemenu-nav{padding:.5rem}.rdt-sidemenu .rdt-sidemenu-content{flex:1;min-height:0;overflow:auto}.rdt-sidemenu.rdt-sidemenu--opened .rdt-sidemenu-panel{transform:translate(0)}@media(min-width:768px){.rdt-sidemenu.rdt-sidemenu--opened{width:var(--rdt-sidebar-width, 240px)}}\n"], dependencies: [{ kind: "component", type: RdtSidemenuItemComponent, selector: "rdt-sidemenu-item", inputs: ["item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1432
|
+
}
|
|
1433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtSidemenuComponent, decorators: [{
|
|
1434
|
+
type: Component,
|
|
1435
|
+
args: [{ selector: 'rdt-sidemenu', standalone: true, imports: [RdtSidemenuItemComponent], providers: [
|
|
1436
|
+
{
|
|
1437
|
+
provide: RDT_SIDEMENU,
|
|
1438
|
+
useExisting: RdtSidemenuComponent,
|
|
1439
|
+
},
|
|
1440
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<aside\n class=\"rdt-sidemenu\"\n [class.rdt-sidemenu--opened]=\"opened()\"\n [style.--rdt-sidebar-width]=\"widthCss()\"\n>\n <div class=\"rdt-sidemenu-panel\">\n <nav class=\"rdt-sidemenu-nav\">\n @for (item of items(); track item.label) {\n <rdt-sidemenu-item [item]=\"item\" />\n }\n </nav>\n <div class=\"rdt-sidemenu-content\">\n <ng-content />\n </div>\n </div>\n</aside>\n", styles: [".rdt-sidemenu{flex-shrink:0;width:0;height:100%;position:relative;transition:width .2s ease}.rdt-sidemenu .rdt-sidemenu-panel{position:absolute;top:0;bottom:0;width:var(--rdt-sidebar-width, 240px);background:var(--rdt-sidemenu-panel-bg, #fff);border-right:1px solid var(--rdt-sidemenu-panel-border-color, #dee2e6);box-shadow:2px 0 8px #0000000f;overflow:auto;z-index:4;transform:translate(-100%);transition:transform .2s ease}.rdt-sidemenu .rdt-sidemenu-nav{padding:.5rem}.rdt-sidemenu .rdt-sidemenu-content{flex:1;min-height:0;overflow:auto}.rdt-sidemenu.rdt-sidemenu--opened .rdt-sidemenu-panel{transform:translate(0)}@media(min-width:768px){.rdt-sidemenu.rdt-sidemenu--opened{width:var(--rdt-sidebar-width, 240px)}}\n"] }]
|
|
1441
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
1442
|
+
|
|
1443
|
+
class RdtSidemenuContainerComponent {
|
|
1444
|
+
sidemenu = contentChild(RdtSidemenuComponent, ...(ngDevMode ? [{ debugName: "sidemenu" }] : []));
|
|
1445
|
+
backdrop = input(true, { ...(ngDevMode ? { debugName: "backdrop" } : {}), transform: booleanAttribute });
|
|
1446
|
+
opened = computed(() => this.sidemenu()?.opened() ?? false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
|
|
1447
|
+
open() {
|
|
1448
|
+
this.sidemenu()?.open();
|
|
1449
|
+
}
|
|
1450
|
+
close() {
|
|
1451
|
+
this.sidemenu()?.close();
|
|
1452
|
+
}
|
|
1453
|
+
toggle() {
|
|
1454
|
+
this.sidemenu()?.toggle();
|
|
1455
|
+
}
|
|
1456
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtSidemenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtSidemenuContainerComponent, isStandalone: true, selector: "rdt-sidemenu-container", inputs: { backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sidemenu", first: true, predicate: RdtSidemenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rdt-sidemenu-container\">\n @if (backdrop()) {\n <div\n class=\"rdt-sidemenu-container-backdrop\"\n [class.rdt-sidemenu-container-backdrop--visible]=\"opened()\"\n (click)=\"close()\"\n (keydown.escape)=\"close()\"\n role=\"presentation\"\n ></div>\n }\n <ng-content />\n</div>\n", styles: [".rdt-sidemenu-container{display:flex;flex-direction:row;height:100%;overflow:hidden}.rdt-sidemenu-container-backdrop{display:none;position:absolute;inset:0;background:#0006;z-index:3;opacity:0;pointer-events:none;transition:opacity .2s ease}@media(max-width:767px){.rdt-sidemenu-container-backdrop{display:block}}@media(max-width:767px){.rdt-sidemenu-container-backdrop--visible{opacity:1;pointer-events:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1458
|
+
}
|
|
1459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtSidemenuContainerComponent, decorators: [{
|
|
1460
|
+
type: Component,
|
|
1461
|
+
args: [{ selector: 'rdt-sidemenu-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rdt-sidemenu-container\">\n @if (backdrop()) {\n <div\n class=\"rdt-sidemenu-container-backdrop\"\n [class.rdt-sidemenu-container-backdrop--visible]=\"opened()\"\n (click)=\"close()\"\n (keydown.escape)=\"close()\"\n role=\"presentation\"\n ></div>\n }\n <ng-content />\n</div>\n", styles: [".rdt-sidemenu-container{display:flex;flex-direction:row;height:100%;overflow:hidden}.rdt-sidemenu-container-backdrop{display:none;position:absolute;inset:0;background:#0006;z-index:3;opacity:0;pointer-events:none;transition:opacity .2s ease}@media(max-width:767px){.rdt-sidemenu-container-backdrop{display:block}}@media(max-width:767px){.rdt-sidemenu-container-backdrop--visible{opacity:1;pointer-events:auto}}\n"] }]
|
|
1462
|
+
}], propDecorators: { sidemenu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdtSidemenuComponent), { isSignal: true }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }] } });
|
|
1463
|
+
|
|
1464
|
+
class RdtSidemenuContentComponent {
|
|
1465
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtSidemenuContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1466
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: RdtSidemenuContentComponent, isStandalone: true, selector: "rdt-sidemenu-content", ngImport: i0, template: "<div class=\"rdt-sidemenu-content\"><ng-content /></div>\n", styles: [".rdt-sidemenu-content{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1467
|
+
}
|
|
1468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtSidemenuContentComponent, decorators: [{
|
|
1469
|
+
type: Component,
|
|
1470
|
+
args: [{ selector: 'rdt-sidemenu-content', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rdt-sidemenu-content\"><ng-content /></div>\n", styles: [".rdt-sidemenu-content{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:auto}\n"] }]
|
|
1471
|
+
}] });
|
|
1472
|
+
|
|
1356
1473
|
/**
|
|
1357
1474
|
* Generated bundle index. Do not edit.
|
|
1358
1475
|
*/
|
|
1359
1476
|
|
|
1360
|
-
export { DEFAULT_MENU_HORIZONTAL_DIR, DEFAULT_MENU_VERTICAL_DIR, RDT_MENU_HORIZONTAL_DIR_PROVIDER, RDT_MENU_MARGIN_BOTTOM_PROPERTY_NAME, RDT_MENU_MARGIN_LEFT_PROPERTY_NAME, RDT_MENU_MARGIN_RIGHT_PROPERTY_NAME, RDT_MENU_MARGIN_TOP_PROPERTY_NAME, RDT_MENU_VERTICAL_DIR_PROVIDER, RdtMenuBarComponent, RdtMenuComponent, RdtMenuModule, RdtMenuShortcutMode };
|
|
1477
|
+
export { DEFAULT_MENU_HORIZONTAL_DIR, DEFAULT_MENU_VERTICAL_DIR, RDT_MENU_HORIZONTAL_DIR_PROVIDER, RDT_MENU_MARGIN_BOTTOM_PROPERTY_NAME, RDT_MENU_MARGIN_LEFT_PROPERTY_NAME, RDT_MENU_MARGIN_RIGHT_PROPERTY_NAME, RDT_MENU_MARGIN_TOP_PROPERTY_NAME, RDT_MENU_VERTICAL_DIR_PROVIDER, RdtMenuBarComponent, RdtMenuComponent, RdtMenuModule, RdtMenuShortcutMode, RdtSidemenuComponent, RdtSidemenuContainerComponent, RdtSidemenuContentComponent };
|
|
1361
1478
|
//# sourceMappingURL=ngrdt-menu.mjs.map
|