@ngrdt/menu 0.0.22 → 0.0.23
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 +61 -61
- package/fesm2022/ngrdt-menu.mjs.map +1 -1
- package/package.json +5 -5
package/fesm2022/ngrdt-menu.mjs
CHANGED
|
@@ -195,25 +195,25 @@ class RdtMenuOverlayComponent {
|
|
|
195
195
|
children;
|
|
196
196
|
focusableElements;
|
|
197
197
|
menuItemContainer;
|
|
198
|
-
item = input.required(
|
|
199
|
-
level = input.required(
|
|
200
|
-
preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR
|
|
201
|
-
preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR
|
|
202
|
-
expandedInput = input(false,
|
|
198
|
+
item = input.required();
|
|
199
|
+
level = input.required();
|
|
200
|
+
preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR);
|
|
201
|
+
preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR);
|
|
202
|
+
expandedInput = input(false, { alias: 'expanded' });
|
|
203
203
|
expanded = linkedSignal(() => this.expandedInput());
|
|
204
|
-
autofocusItemInput = input(null,
|
|
205
|
-
|
|
206
|
-
|
|
204
|
+
autofocusItemInput = input(null, {
|
|
205
|
+
alias: 'autofocusItem',
|
|
206
|
+
});
|
|
207
207
|
autofocusItem = linkedSignal(() => this.autofocusItemInput());
|
|
208
208
|
// Element used to relatively position menu,
|
|
209
209
|
// typically parent element.
|
|
210
210
|
// If not specified, parent element is used.
|
|
211
|
-
anchorElementInput = input(null,
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
anchorElement = computed(() => this.anchorElementInput() ?? this.elRef.nativeElement.parentElement
|
|
215
|
-
zIndex = computed(() => this.level() + 10
|
|
216
|
-
isRootLevel = computed(() => this.level() === 0
|
|
211
|
+
anchorElementInput = input(null, {
|
|
212
|
+
alias: 'anchorElement',
|
|
213
|
+
});
|
|
214
|
+
anchorElement = computed(() => this.anchorElementInput() ?? this.elRef.nativeElement.parentElement);
|
|
215
|
+
zIndex = computed(() => this.level() + 10);
|
|
216
|
+
isRootLevel = computed(() => this.level() === 0);
|
|
217
217
|
// Bounding box of this excluding any extra offset.
|
|
218
218
|
_box;
|
|
219
219
|
get box() {
|
|
@@ -223,14 +223,14 @@ class RdtMenuOverlayComponent {
|
|
|
223
223
|
_anchorBox;
|
|
224
224
|
_containerPadding = { top: 0, bottom: 0 };
|
|
225
225
|
// Currently applied vertical and horizontal directions.
|
|
226
|
-
verticalDir = signal(null,
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
horizontalDir = signal(null,
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
expandedChild = signal(null
|
|
233
|
-
autofocusSubmenuItem = signal(null
|
|
226
|
+
verticalDir = signal(null, {
|
|
227
|
+
equal: areVertDirsEqual,
|
|
228
|
+
});
|
|
229
|
+
horizontalDir = signal(null, {
|
|
230
|
+
equal: areHorDirsEqual,
|
|
231
|
+
});
|
|
232
|
+
expandedChild = signal(null);
|
|
233
|
+
autofocusSubmenuItem = signal(null);
|
|
234
234
|
keyActions = {
|
|
235
235
|
[KB_CODE.ARROW.UP]: (index) => this.focusPrevItem(index),
|
|
236
236
|
[KB_CODE.ARROW.DOWN]: (index) => this.focusNextItem(index),
|
|
@@ -255,12 +255,12 @@ class RdtMenuOverlayComponent {
|
|
|
255
255
|
}
|
|
256
256
|
recalcEffect = effect(() => {
|
|
257
257
|
this.recalculatePosition(this.preferredHorizontalDir(), this.preferredVerticalDir());
|
|
258
|
-
}
|
|
258
|
+
});
|
|
259
259
|
expandedEffect = effect(() => {
|
|
260
260
|
if (!this.expanded()) {
|
|
261
261
|
this.expandedChild.set(null);
|
|
262
262
|
}
|
|
263
|
-
}
|
|
263
|
+
});
|
|
264
264
|
expandedFocusEffect = afterRenderEffect(() => {
|
|
265
265
|
const rootItem = untracked(this.item);
|
|
266
266
|
this.expandedInput();
|
|
@@ -730,10 +730,10 @@ class RdtMenuOverlayComponent {
|
|
|
730
730
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
731
731
|
.subscribe((event) => this.onTabKeyPress(event));
|
|
732
732
|
}
|
|
733
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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; 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 [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"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 }\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 @if (item.items) {\r\n <span class=\"menu-item-icon rdt-menu-icon-right\"></span>\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 [aria-expanded=true].menu-item-content{--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-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: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
735
735
|
}
|
|
736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuOverlayComponent, decorators: [{
|
|
737
737
|
type: Component,
|
|
738
738
|
args: [{ selector: 'rdt-menu-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
|
|
739
739
|
'[class.expanded]': 'expanded()',
|
|
@@ -756,16 +756,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
756
756
|
}] } });
|
|
757
757
|
|
|
758
758
|
class RdtMenuBaseComponent {
|
|
759
|
-
preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR
|
|
760
|
-
preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR
|
|
759
|
+
preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR);
|
|
760
|
+
preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR);
|
|
761
761
|
// Mode only matters if item has shortcut and only children, no command nor routerLink
|
|
762
762
|
// FOCUS_ITEM will put focus on item with shortcut
|
|
763
763
|
// OPEN_SUBMENU will open its submenu and put focus on the first item in it
|
|
764
764
|
// If item has command or routerLink, it will always be activated and everything closed
|
|
765
|
-
shortcutMode = input(RdtMenuShortcutMode.OPEN_SUBMENU
|
|
766
|
-
closeOnFocusOut = input(false,
|
|
767
|
-
openOnHover = input(false,
|
|
768
|
-
hitboxMargin = input(10,
|
|
765
|
+
shortcutMode = input(RdtMenuShortcutMode.OPEN_SUBMENU);
|
|
766
|
+
closeOnFocusOut = input(false, { transform: booleanAttribute });
|
|
767
|
+
openOnHover = input(false, { transform: booleanAttribute });
|
|
768
|
+
hitboxMargin = input(10, { transform: numberAttribute });
|
|
769
769
|
cd = inject(ChangeDetectorRef);
|
|
770
770
|
destroyRef = inject(DestroyRef);
|
|
771
771
|
rdtRouter = inject(RdtRouterService);
|
|
@@ -777,7 +777,7 @@ class RdtMenuBaseComponent {
|
|
|
777
777
|
injector = inject(EnvironmentInjector);
|
|
778
778
|
children;
|
|
779
779
|
focusableElements;
|
|
780
|
-
expandedChild = signal(null
|
|
780
|
+
expandedChild = signal(null);
|
|
781
781
|
autofocusSubmenuItem = null;
|
|
782
782
|
filteredItems = computed(() => {
|
|
783
783
|
this.navigationEnd();
|
|
@@ -789,7 +789,7 @@ class RdtMenuBaseComponent {
|
|
|
789
789
|
else {
|
|
790
790
|
return this.filterRec(items, current);
|
|
791
791
|
}
|
|
792
|
-
}
|
|
792
|
+
});
|
|
793
793
|
get clientSize() {
|
|
794
794
|
return this._clientSize;
|
|
795
795
|
}
|
|
@@ -802,7 +802,7 @@ class RdtMenuBaseComponent {
|
|
|
802
802
|
return this._buttonContainerRect;
|
|
803
803
|
}
|
|
804
804
|
_buttonContainerRect;
|
|
805
|
-
childRoutesMap = computed(() => getChildRoutesMap(this.filteredItems())
|
|
805
|
+
childRoutesMap = computed(() => getChildRoutesMap(this.filteredItems()));
|
|
806
806
|
keyActions = {
|
|
807
807
|
[KB_CODE.ARROW.LEFT]: (index) => this.focusPrevItem(index),
|
|
808
808
|
[KB_CODE.ARROW.RIGHT]: (index) => this.focusNextItem(index),
|
|
@@ -828,7 +828,7 @@ class RdtMenuBaseComponent {
|
|
|
828
828
|
}
|
|
829
829
|
recalcChildrenEffect = effect(() => {
|
|
830
830
|
this.recalculateChildren();
|
|
831
|
-
}
|
|
831
|
+
});
|
|
832
832
|
recalculateChildren() {
|
|
833
833
|
if (this.children) {
|
|
834
834
|
this.children.forEach((child) => {
|
|
@@ -1162,10 +1162,10 @@ class RdtMenuBaseComponent {
|
|
|
1162
1162
|
}
|
|
1163
1163
|
return false;
|
|
1164
1164
|
}
|
|
1165
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1166
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
1165
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1166
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", 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 });
|
|
1167
1167
|
}
|
|
1168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuBaseComponent, decorators: [{
|
|
1169
1169
|
type: Directive,
|
|
1170
1170
|
args: [{
|
|
1171
1171
|
host: {
|
|
@@ -1188,19 +1188,19 @@ class RdtMenuBarComponent extends RdtMenuBaseComponent {
|
|
|
1188
1188
|
get buttonContainer() {
|
|
1189
1189
|
return this.buttonContainerRef?.nativeElement;
|
|
1190
1190
|
}
|
|
1191
|
-
items = input.required(
|
|
1192
|
-
allParsedItems = computed(() => parseMenuItems(this.items(), this.injector)
|
|
1193
|
-
headerHeight = input(0,
|
|
1194
|
-
footerHeight = input(0,
|
|
1195
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1196
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1191
|
+
items = input.required();
|
|
1192
|
+
allParsedItems = computed(() => parseMenuItems(this.items(), this.injector));
|
|
1193
|
+
headerHeight = input(0, { transform: numberAttribute });
|
|
1194
|
+
footerHeight = input(0, { transform: numberAttribute });
|
|
1195
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1196
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: [
|
|
1197
1197
|
{
|
|
1198
1198
|
provide: RdtMenuBaseComponent,
|
|
1199
1199
|
useExisting: RdtMenuBarComponent,
|
|
1200
1200
|
},
|
|
1201
1201
|
], 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; 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 [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n [attr.aria-expanded]=\"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-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 }\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 @if(item.items) {\r\n <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\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 }\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 @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{margin-left: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-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;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-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{--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.focus-visible:focus,.menu-bar-item .menu-bar-item-content: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: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1202
1202
|
}
|
|
1203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
|
|
1204
1204
|
type: Component,
|
|
1205
1205
|
args: [{ selector: 'rdt-menu-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1206
1206
|
{
|
|
@@ -1217,9 +1217,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1217
1217
|
|
|
1218
1218
|
class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
1219
1219
|
buttonClass = inject(RDT_BUTTON_BASE_PROVIDER);
|
|
1220
|
-
trigger = input.required(
|
|
1221
|
-
dataTestId = input(''
|
|
1222
|
-
items = input.required(
|
|
1220
|
+
trigger = input.required();
|
|
1221
|
+
dataTestId = input('');
|
|
1222
|
+
items = input.required();
|
|
1223
1223
|
allParsedItems = computed(() => {
|
|
1224
1224
|
const items = this.items();
|
|
1225
1225
|
const wrapper = {
|
|
@@ -1228,7 +1228,7 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1228
1228
|
items: items,
|
|
1229
1229
|
};
|
|
1230
1230
|
return parseMenuItems([wrapper], this.injector);
|
|
1231
|
-
}
|
|
1231
|
+
});
|
|
1232
1232
|
focusableElements = new QueryList();
|
|
1233
1233
|
get buttonContainer() {
|
|
1234
1234
|
return this.anchorElement() ?? undefined;
|
|
@@ -1250,12 +1250,12 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1250
1250
|
triggerTabIndexEffect = effect(() => {
|
|
1251
1251
|
const trigger = this.trigger();
|
|
1252
1252
|
trigger.tabIndex.set(0);
|
|
1253
|
-
}
|
|
1253
|
+
});
|
|
1254
1254
|
triggerDataTestIdEffect = effect(() => {
|
|
1255
1255
|
const trigger = this.trigger();
|
|
1256
1256
|
const dataTestId = this.dataTestId();
|
|
1257
1257
|
trigger.dataTestId.set(dataTestId);
|
|
1258
|
-
}
|
|
1258
|
+
});
|
|
1259
1259
|
triggerAriaEffect = effect(() => {
|
|
1260
1260
|
const trigger = this.trigger();
|
|
1261
1261
|
const expandedChild = this.expandedChild();
|
|
@@ -1264,7 +1264,7 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1264
1264
|
'aria-haspopup': 'true',
|
|
1265
1265
|
'aria-expanded': expandedChild?.item === this.parsedItem,
|
|
1266
1266
|
});
|
|
1267
|
-
}
|
|
1267
|
+
});
|
|
1268
1268
|
subscribeClicks() {
|
|
1269
1269
|
toObservable(this.trigger)
|
|
1270
1270
|
.pipe(switchMap((trigger) => trigger.click$), takeUntilDestroyed(this.destroyRef))
|
|
@@ -1287,15 +1287,15 @@ class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
|
1287
1287
|
this.focusableElements.reset([{ nativeElement: anchor }]);
|
|
1288
1288
|
}
|
|
1289
1289
|
}
|
|
1290
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1291
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1290
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1291
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtMenuComponent, isStandalone: false, selector: "rdt-menu", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, dataTestId: { classPropertyName: "dataTestId", publicName: "dataTestId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
1292
1292
|
{
|
|
1293
1293
|
provide: RdtMenuBaseComponent,
|
|
1294
1294
|
useExisting: RdtMenuComponent,
|
|
1295
1295
|
},
|
|
1296
1296
|
], 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{margin-left: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-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 });
|
|
1297
1297
|
}
|
|
1298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuComponent, decorators: [{
|
|
1299
1299
|
type: Component,
|
|
1300
1300
|
args: [{ selector: 'rdt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1301
1301
|
{
|
|
@@ -1306,18 +1306,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1306
1306
|
}], ctorParameters: () => [] });
|
|
1307
1307
|
|
|
1308
1308
|
class RdtMenuModule {
|
|
1309
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1310
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
1309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1310
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuModule, declarations: [RdtMenuOverlayComponent,
|
|
1311
1311
|
RdtMenuComponent,
|
|
1312
1312
|
RdtMenuBarComponent], imports: [CommonModule,
|
|
1313
1313
|
RouterModule,
|
|
1314
1314
|
RdtAnyRouteActiveDirective,
|
|
1315
1315
|
RdtKeyListenerDirective,
|
|
1316
1316
|
RdtButtonOutletDirective], exports: [RdtMenuComponent, RdtMenuBarComponent] });
|
|
1317
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
1317
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuModule, imports: [CommonModule,
|
|
1318
1318
|
RouterModule] });
|
|
1319
1319
|
}
|
|
1320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuModule, decorators: [{
|
|
1321
1321
|
type: NgModule,
|
|
1322
1322
|
args: [{
|
|
1323
1323
|
imports: [
|