@ngrdt/menu 0.0.16 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,161 +1,161 @@
|
|
|
1
|
-
# @ngrdt/menu
|
|
2
|
-
|
|
3
|
-
This package provides two desktop first components - nested menu `rdt-menu` which is activated by your own `rdt-button` and `rdt-menu-bar` which uses custom buttons.
|
|
4
|
-
|
|
5
|
-
The point of this library is to provide fully customizable and accessible menu compliant with ARIA standards, compatible with custom shortcuts as well as tab key, arrows etc according to [Mozilla guidelines](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/menubar_role).
|
|
6
|
-
|
|
7
|
-
## General usage
|
|
8
|
-
|
|
9
|
-
For menu to work you need to define and provide `rdt-button`. See component `ngrdt-demo/src/app/test-menu-button` for basic instructions on how to do that. This only applies to menu, not menu bar.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
## Styling
|
|
13
|
-
|
|
14
|
-
Setting `background` and `color` properties directly is not recommended. Instead set CSS variables. You may use custom styles for menu bar or menu overlay for extra spacing, `border-radius`, icons etc.
|
|
15
|
-
|
|
16
|
-
For ergonomics you should always use different colors or borders for different states. Use semi transparent versions of one color if you don't know which colors to pick.
|
|
17
|
-
|
|
18
|
-
### State order
|
|
19
|
-
|
|
20
|
-
Menu items can be in various overlapping states. Here is order of importance:
|
|
21
|
-
|
|
22
|
-
1. focus - User navigates to button using arrows or `tab` key.
|
|
23
|
-
2. hover
|
|
24
|
-
3. expanded - Submenu opened by this item is currently active and visible.
|
|
25
|
-
4. route-active - Either menu itself or one of its submenus contains link to current page.
|
|
26
|
-
|
|
27
|
-
### Leveraging overriden CSS variables
|
|
28
|
-
|
|
29
|
-
Component styles are designed in a way which lets you use variables for multiple purposes.
|
|
30
|
-
|
|
31
|
-
```css
|
|
32
|
-
.menu-bar-item .menu-bar-item-content:hover {
|
|
33
|
-
--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);
|
|
34
|
-
--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);
|
|
35
|
-
--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);
|
|
36
|
-
}
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
For instance the default icons are made purely in CSS and use this pattern to always have the same color as the button label.
|
|
40
|
-
|
|
41
|
-
```css
|
|
42
|
-
.menu-bar-item-icon.rdt-menu-icon-down {
|
|
43
|
-
width: 0;
|
|
44
|
-
height: 0;
|
|
45
|
-
border-left: var(--rdt-menu-default-icon-size) solid transparent;
|
|
46
|
-
border-right: var(--rdt-menu-default-icon-size) solid transparent;
|
|
47
|
-
border-top: var(--rdt-menu-default-icon-size) solid
|
|
48
|
-
var(--rdt-menu-bar-item-text-color);
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
### Playground theme
|
|
53
|
-
|
|
54
|
-
I recommend using this theme to understand all different variables.
|
|
55
|
-
|
|
56
|
-
```css
|
|
57
|
-
:root {
|
|
58
|
-
/*************************************************/
|
|
59
|
-
/************** Menu overlay styles **************/
|
|
60
|
-
/*************************************************/
|
|
61
|
-
|
|
62
|
-
// Minimum width of menu overlay
|
|
63
|
-
--rdt-menu-min-width: 12rem;
|
|
64
|
-
|
|
65
|
-
// Border radius of menu overlay
|
|
66
|
-
--rdt-menu-border-radius: 5px;
|
|
67
|
-
|
|
68
|
-
// Background color of menu overlay - mainly color of horizontal padding.
|
|
69
|
-
--rdt-menu-background: black;
|
|
70
|
-
|
|
71
|
-
// Horizontal padding of menu overlay (above and below the menu items)
|
|
72
|
-
--rdt-menu-padding-horizontal-padding: 0.75rem;
|
|
73
|
-
|
|
74
|
-
// Box shadow of menu overlay
|
|
75
|
-
--rdt-menu-box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
|
|
76
|
-
0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
|
|
77
|
-
|
|
78
|
-
// Margin of menu overlay (distance from bottom of menu (bar) button to top of menu overlay)
|
|
79
|
-
// If you set higher value than 10, then adjust [hitboxMargin] accordingly.
|
|
80
|
-
--rdt-menu-overlay-margin-x: 0px;
|
|
81
|
-
--rdt-menu-overlay-margin-y: 5px;
|
|
82
|
-
|
|
83
|
-
// Size of default arrows
|
|
84
|
-
--rdt-menu-default-icon-size: 0.3rem;
|
|
85
|
-
|
|
86
|
-
/**********************************************/
|
|
87
|
-
/************** Menu item styles **************/
|
|
88
|
-
/**********************************************/
|
|
89
|
-
// These only change styles of items within popup. NOT the menu bar items.
|
|
90
|
-
|
|
91
|
-
// Default menu item style
|
|
92
|
-
--rdt-menu-item-background: white;
|
|
93
|
-
--rdt-menu-item-text-color: black;
|
|
94
|
-
--rdt-menu-item-padding: 0.5rem 1rem;
|
|
95
|
-
--rdt-menu-item-border: none;
|
|
96
|
-
--rdt-menu-item-outline: none;
|
|
97
|
-
|
|
98
|
-
// Hover styles
|
|
99
|
-
--rdt-menu-item-hover-background: green;
|
|
100
|
-
--rdt-menu-item-hover-text-color: green;
|
|
101
|
-
--rdt-menu-item-hover-border: none;
|
|
102
|
-
--rdt-menu-item-hover-outline: none;
|
|
103
|
-
|
|
104
|
-
// Expanded styles
|
|
105
|
-
--rdt-menu-item-expanded-background: cyan;
|
|
106
|
-
--rdt-menu-item-expanded-text-color: cyan;
|
|
107
|
-
--rdt-menu-item-expanded-border: none;
|
|
108
|
-
--rdt-menu-item-expanded-outline: none;
|
|
109
|
-
|
|
110
|
-
// Focus styles
|
|
111
|
-
--rdt-menu-item-focus-background: red;
|
|
112
|
-
--rdt-menu-item-focus-text-color: red;
|
|
113
|
-
--rdt-menu-item-focus-border: none;
|
|
114
|
-
--rdt-menu-item-focus-outline: none;
|
|
115
|
-
|
|
116
|
-
// Route active styles
|
|
117
|
-
--rdt-menu-item-route-active-background: lightblue;
|
|
118
|
-
--rdt-menu-item-route-active-text-color: lightblue;
|
|
119
|
-
--rdt-menu-item-route-active-border: none;
|
|
120
|
-
--rdt-menu-item-route-active-outline: none;
|
|
121
|
-
|
|
122
|
-
/**********************************************/
|
|
123
|
-
/************ Menu bar item styles ************/
|
|
124
|
-
/**********************************************/
|
|
125
|
-
|
|
126
|
-
--rdt-menu-bar-padding: 0 0.5rem;
|
|
127
|
-
|
|
128
|
-
// Default menu bar item style
|
|
129
|
-
--rdt-menu-bar-item-background: transparent;
|
|
130
|
-
--rdt-menu-bar-item-text-color: black;
|
|
131
|
-
--rdt-menu-bar-item-padding: 0.5rem;
|
|
132
|
-
--rdt-menu-bar-item-border-radius: 5px;
|
|
133
|
-
--rdt-menu-bar-item-border: none;
|
|
134
|
-
--rdt-menu-bar-item-outline: none;
|
|
135
|
-
--rdt-menu-bar-item-margin: 0 0.5rem;
|
|
136
|
-
|
|
137
|
-
// Hover styles
|
|
138
|
-
--rdt-menu-bar-item-hover-background: lightgreen;
|
|
139
|
-
--rdt-menu-bar-item-hover-text-color: lightgreen;
|
|
140
|
-
--rdt-menu-bar-item-hover-border: none;
|
|
141
|
-
--rdt-menu-bar-item-hover-outline: none;
|
|
142
|
-
|
|
143
|
-
// Expanded styles
|
|
144
|
-
--rdt-menu-bar-item-expanded-background: blue;
|
|
145
|
-
--rdt-menu-bar-item-expanded-text-color: blue;
|
|
146
|
-
--rdt-menu-bar-item-expanded-border: none;
|
|
147
|
-
--rdt-menu-bar-item-expanded-outline: none;
|
|
148
|
-
|
|
149
|
-
// Focus styles
|
|
150
|
-
--rdt-menu-bar-item-focus-background: orange;
|
|
151
|
-
--rdt-menu-bar-item-focus-text-color: orange;
|
|
152
|
-
--rdt-menu-bar-item-focus-border: none;
|
|
153
|
-
--rdt-menu-bar-item-focus-outline: none;
|
|
154
|
-
|
|
155
|
-
// Route active styles
|
|
156
|
-
--rdt-menu-bar-item-route-active-background: pink;
|
|
157
|
-
--rdt-menu-bar-item-route-active-text-color: pink;
|
|
158
|
-
--rdt-menu-bar-item-route-active-border: none;
|
|
159
|
-
--rdt-menu-bar-item-route-active-outline: none;
|
|
160
|
-
}
|
|
1
|
+
# @ngrdt/menu
|
|
2
|
+
|
|
3
|
+
This package provides two desktop first components - nested menu `rdt-menu` which is activated by your own `rdt-button` and `rdt-menu-bar` which uses custom buttons.
|
|
4
|
+
|
|
5
|
+
The point of this library is to provide fully customizable and accessible menu compliant with ARIA standards, compatible with custom shortcuts as well as tab key, arrows etc according to [Mozilla guidelines](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/menubar_role).
|
|
6
|
+
|
|
7
|
+
## General usage
|
|
8
|
+
|
|
9
|
+
For menu to work you need to define and provide `rdt-button`. See component `ngrdt-demo/src/app/test-menu-button` for basic instructions on how to do that. This only applies to menu, not menu bar.
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## Styling
|
|
13
|
+
|
|
14
|
+
Setting `background` and `color` properties directly is not recommended. Instead set CSS variables. You may use custom styles for menu bar or menu overlay for extra spacing, `border-radius`, icons etc.
|
|
15
|
+
|
|
16
|
+
For ergonomics you should always use different colors or borders for different states. Use semi transparent versions of one color if you don't know which colors to pick.
|
|
17
|
+
|
|
18
|
+
### State order
|
|
19
|
+
|
|
20
|
+
Menu items can be in various overlapping states. Here is order of importance:
|
|
21
|
+
|
|
22
|
+
1. focus - User navigates to button using arrows or `tab` key.
|
|
23
|
+
2. hover
|
|
24
|
+
3. expanded - Submenu opened by this item is currently active and visible.
|
|
25
|
+
4. route-active - Either menu itself or one of its submenus contains link to current page.
|
|
26
|
+
|
|
27
|
+
### Leveraging overriden CSS variables
|
|
28
|
+
|
|
29
|
+
Component styles are designed in a way which lets you use variables for multiple purposes.
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
.menu-bar-item .menu-bar-item-content:hover {
|
|
33
|
+
--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);
|
|
34
|
+
--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);
|
|
35
|
+
--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
For instance the default icons are made purely in CSS and use this pattern to always have the same color as the button label.
|
|
40
|
+
|
|
41
|
+
```css
|
|
42
|
+
.menu-bar-item-icon.rdt-menu-icon-down {
|
|
43
|
+
width: 0;
|
|
44
|
+
height: 0;
|
|
45
|
+
border-left: var(--rdt-menu-default-icon-size) solid transparent;
|
|
46
|
+
border-right: var(--rdt-menu-default-icon-size) solid transparent;
|
|
47
|
+
border-top: var(--rdt-menu-default-icon-size) solid
|
|
48
|
+
var(--rdt-menu-bar-item-text-color);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Playground theme
|
|
53
|
+
|
|
54
|
+
I recommend using this theme to understand all different variables.
|
|
55
|
+
|
|
56
|
+
```css
|
|
57
|
+
:root {
|
|
58
|
+
/*************************************************/
|
|
59
|
+
/************** Menu overlay styles **************/
|
|
60
|
+
/*************************************************/
|
|
61
|
+
|
|
62
|
+
// Minimum width of menu overlay
|
|
63
|
+
--rdt-menu-min-width: 12rem;
|
|
64
|
+
|
|
65
|
+
// Border radius of menu overlay
|
|
66
|
+
--rdt-menu-border-radius: 5px;
|
|
67
|
+
|
|
68
|
+
// Background color of menu overlay - mainly color of horizontal padding.
|
|
69
|
+
--rdt-menu-background: black;
|
|
70
|
+
|
|
71
|
+
// Horizontal padding of menu overlay (above and below the menu items)
|
|
72
|
+
--rdt-menu-padding-horizontal-padding: 0.75rem;
|
|
73
|
+
|
|
74
|
+
// Box shadow of menu overlay
|
|
75
|
+
--rdt-menu-box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
|
|
76
|
+
0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
|
|
77
|
+
|
|
78
|
+
// Margin of menu overlay (distance from bottom of menu (bar) button to top of menu overlay)
|
|
79
|
+
// If you set higher value than 10, then adjust [hitboxMargin] accordingly.
|
|
80
|
+
--rdt-menu-overlay-margin-x: 0px;
|
|
81
|
+
--rdt-menu-overlay-margin-y: 5px;
|
|
82
|
+
|
|
83
|
+
// Size of default arrows
|
|
84
|
+
--rdt-menu-default-icon-size: 0.3rem;
|
|
85
|
+
|
|
86
|
+
/**********************************************/
|
|
87
|
+
/************** Menu item styles **************/
|
|
88
|
+
/**********************************************/
|
|
89
|
+
// These only change styles of items within popup. NOT the menu bar items.
|
|
90
|
+
|
|
91
|
+
// Default menu item style
|
|
92
|
+
--rdt-menu-item-background: white;
|
|
93
|
+
--rdt-menu-item-text-color: black;
|
|
94
|
+
--rdt-menu-item-padding: 0.5rem 1rem;
|
|
95
|
+
--rdt-menu-item-border: none;
|
|
96
|
+
--rdt-menu-item-outline: none;
|
|
97
|
+
|
|
98
|
+
// Hover styles
|
|
99
|
+
--rdt-menu-item-hover-background: green;
|
|
100
|
+
--rdt-menu-item-hover-text-color: green;
|
|
101
|
+
--rdt-menu-item-hover-border: none;
|
|
102
|
+
--rdt-menu-item-hover-outline: none;
|
|
103
|
+
|
|
104
|
+
// Expanded styles
|
|
105
|
+
--rdt-menu-item-expanded-background: cyan;
|
|
106
|
+
--rdt-menu-item-expanded-text-color: cyan;
|
|
107
|
+
--rdt-menu-item-expanded-border: none;
|
|
108
|
+
--rdt-menu-item-expanded-outline: none;
|
|
109
|
+
|
|
110
|
+
// Focus styles
|
|
111
|
+
--rdt-menu-item-focus-background: red;
|
|
112
|
+
--rdt-menu-item-focus-text-color: red;
|
|
113
|
+
--rdt-menu-item-focus-border: none;
|
|
114
|
+
--rdt-menu-item-focus-outline: none;
|
|
115
|
+
|
|
116
|
+
// Route active styles
|
|
117
|
+
--rdt-menu-item-route-active-background: lightblue;
|
|
118
|
+
--rdt-menu-item-route-active-text-color: lightblue;
|
|
119
|
+
--rdt-menu-item-route-active-border: none;
|
|
120
|
+
--rdt-menu-item-route-active-outline: none;
|
|
121
|
+
|
|
122
|
+
/**********************************************/
|
|
123
|
+
/************ Menu bar item styles ************/
|
|
124
|
+
/**********************************************/
|
|
125
|
+
|
|
126
|
+
--rdt-menu-bar-padding: 0 0.5rem;
|
|
127
|
+
|
|
128
|
+
// Default menu bar item style
|
|
129
|
+
--rdt-menu-bar-item-background: transparent;
|
|
130
|
+
--rdt-menu-bar-item-text-color: black;
|
|
131
|
+
--rdt-menu-bar-item-padding: 0.5rem;
|
|
132
|
+
--rdt-menu-bar-item-border-radius: 5px;
|
|
133
|
+
--rdt-menu-bar-item-border: none;
|
|
134
|
+
--rdt-menu-bar-item-outline: none;
|
|
135
|
+
--rdt-menu-bar-item-margin: 0 0.5rem;
|
|
136
|
+
|
|
137
|
+
// Hover styles
|
|
138
|
+
--rdt-menu-bar-item-hover-background: lightgreen;
|
|
139
|
+
--rdt-menu-bar-item-hover-text-color: lightgreen;
|
|
140
|
+
--rdt-menu-bar-item-hover-border: none;
|
|
141
|
+
--rdt-menu-bar-item-hover-outline: none;
|
|
142
|
+
|
|
143
|
+
// Expanded styles
|
|
144
|
+
--rdt-menu-bar-item-expanded-background: blue;
|
|
145
|
+
--rdt-menu-bar-item-expanded-text-color: blue;
|
|
146
|
+
--rdt-menu-bar-item-expanded-border: none;
|
|
147
|
+
--rdt-menu-bar-item-expanded-outline: none;
|
|
148
|
+
|
|
149
|
+
// Focus styles
|
|
150
|
+
--rdt-menu-bar-item-focus-background: orange;
|
|
151
|
+
--rdt-menu-bar-item-focus-text-color: orange;
|
|
152
|
+
--rdt-menu-bar-item-focus-border: none;
|
|
153
|
+
--rdt-menu-bar-item-focus-outline: none;
|
|
154
|
+
|
|
155
|
+
// Route active styles
|
|
156
|
+
--rdt-menu-bar-item-route-active-background: pink;
|
|
157
|
+
--rdt-menu-bar-item-route-active-text-color: pink;
|
|
158
|
+
--rdt-menu-bar-item-route-active-border: none;
|
|
159
|
+
--rdt-menu-bar-item-route-active-outline: none;
|
|
160
|
+
}
|
|
161
161
|
```
|
package/esm2022/index.mjs
CHANGED
|
@@ -2,4 +2,4 @@ export * from './lib/menu-bar/rdt-menu-bar.component';
|
|
|
2
2
|
export * from './lib/menu/rdt-menu.component';
|
|
3
3
|
export * from './lib/models';
|
|
4
4
|
export * from './lib/rdt-menu.module';
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9AbmdyZHQvbWVudS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsY0FBYyxDQUFDO0FBQzdCLGNBQWMsdUJBQXVCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpYi9tZW51LWJhci9yZHQtbWVudS1iYXIuY29tcG9uZW50JztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvbWVudS9yZHQtbWVudS5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RlbHMnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yZHQtbWVudS5tb2R1bGUnO1xyXG4iXX0=
|
|
@@ -30,7 +30,7 @@ export class RdtMenuBarComponent extends RdtMenuBaseComponent {
|
|
|
30
30
|
provide: RdtMenuBaseComponent,
|
|
31
31
|
useExisting: RdtMenuBarComponent,
|
|
32
32
|
},
|
|
33
|
-
], 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 parsedItems; 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);
|
|
33
|
+
], 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 parsedItems; 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: i5.RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
34
34
|
}
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
@@ -39,7 +39,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
39
39
|
provide: RdtMenuBaseComponent,
|
|
40
40
|
useExisting: RdtMenuBarComponent,
|
|
41
41
|
},
|
|
42
|
-
], template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n @for(item of parsedItems; 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);
|
|
42
|
+
], template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n @for(item of parsedItems; 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"] }]
|
|
43
43
|
}], propDecorators: { buttonContainerRef: [{
|
|
44
44
|
type: ViewChild,
|
|
45
45
|
args: ['buttonContainer', { static: true }]
|