@ngrdt/menu 0.0.12 → 0.0.14
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 +157 -3
- package/esm2022/index.mjs +2 -2
- package/esm2022/lib/menu/rdt-menu.component.mjs +57 -26
- package/esm2022/lib/menu-bar/rdt-menu-bar.component.mjs +12 -5
- package/esm2022/lib/menu-base/rdt-menu-base.component.mjs +15 -17
- package/esm2022/lib/menu-overlay/rdt-menu-overlay.component.mjs +3 -5
- package/esm2022/lib/rdt-menu.module.mjs +5 -5
- package/fesm2022/ngrdt-menu.mjs +113 -79
- package/fesm2022/ngrdt-menu.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/lib/menu/rdt-menu.component.d.ts +15 -8
- package/lib/menu-bar/rdt-menu-bar.component.d.ts +3 -0
- package/lib/menu-base/rdt-menu-base.component.d.ts +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,161 @@
|
|
|
1
1
|
# @ngrdt/menu
|
|
2
2
|
|
|
3
|
-
This
|
|
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
4
|
|
|
5
|
-
|
|
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
6
|
|
|
7
|
-
|
|
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
|
+
```
|
package/esm2022/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from './lib/menu/rdt-menu.component';
|
|
2
1
|
export * from './lib/menu-bar/rdt-menu-bar.component';
|
|
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9AbmdyZHQvbWVudS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsY0FBYyxDQUFDO0FBQzdCLGNBQWMsdUJBQXVCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpYi9tZW51LWJhci9yZHQtbWVudS1iYXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21lbnUvcmR0LW1lbnUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGVscyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9yZHQtbWVudS5tb2R1bGUnO1xuIl19
|
|
@@ -1,49 +1,77 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation, } from '@angular/core';
|
|
2
|
-
import { RDT_BUTTON_BASE_PROVIDER
|
|
1
|
+
import { ChangeDetectionStrategy, Component, inject, Input, QueryList, ViewEncapsulation, } from '@angular/core';
|
|
2
|
+
import { RDT_BUTTON_BASE_PROVIDER } from '@ngrdt/button';
|
|
3
3
|
import { RdtMenuBaseComponent } from '../menu-base/rdt-menu-base.component';
|
|
4
4
|
import { parseMenuItems } from '../private-models';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "@angular/common";
|
|
7
|
-
import * as i2 from "
|
|
8
|
-
import * as i3 from "../menu-overlay/rdt-menu-overlay.component";
|
|
7
|
+
import * as i2 from "../menu-overlay/rdt-menu-overlay.component";
|
|
9
8
|
export class RdtMenuComponent extends RdtMenuBaseComponent {
|
|
10
9
|
buttonClass = inject(RDT_BUTTON_BASE_PROVIDER);
|
|
10
|
+
trigger;
|
|
11
11
|
dataTestId = '';
|
|
12
|
-
get
|
|
13
|
-
return this.
|
|
12
|
+
get items() {
|
|
13
|
+
return this._items;
|
|
14
14
|
}
|
|
15
|
-
set
|
|
16
|
-
this.
|
|
17
|
-
|
|
15
|
+
set items(value) {
|
|
16
|
+
this._items = value;
|
|
17
|
+
const wrapper = {
|
|
18
|
+
label: '',
|
|
19
|
+
icon: '',
|
|
20
|
+
items: value,
|
|
21
|
+
};
|
|
22
|
+
this.allParsedItems = parseMenuItems([wrapper], this.injector);
|
|
18
23
|
this.filterItems();
|
|
19
24
|
}
|
|
20
|
-
|
|
25
|
+
_items;
|
|
26
|
+
focusableElements = new QueryList();
|
|
27
|
+
get buttonContainer() {
|
|
28
|
+
return this.anchorElement ?? undefined;
|
|
29
|
+
}
|
|
21
30
|
get parsedItem() {
|
|
22
31
|
return this.parsedItems[0];
|
|
23
32
|
}
|
|
24
|
-
get
|
|
25
|
-
return
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
33
|
+
get anchorElement() {
|
|
34
|
+
return this.trigger.anchorElement;
|
|
35
|
+
}
|
|
36
|
+
ngOnInit() {
|
|
37
|
+
super.ngOnInit();
|
|
38
|
+
this.trigger.tabIndex = 0;
|
|
39
|
+
this.trigger.dataTestId = this.dataTestId;
|
|
40
|
+
this.trigger.click$.subscribe(() => this.toggle());
|
|
41
|
+
this.listenPointerOver();
|
|
42
|
+
if (this.anchorElement) {
|
|
43
|
+
console.log('Anchor element:', this.anchorElement);
|
|
44
|
+
this.focusableElements.reset([{ nativeElement: this.anchorElement }]);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
ngDoCheck() {
|
|
48
|
+
if (this.trigger) {
|
|
49
|
+
this.trigger.aria = {
|
|
31
50
|
role: 'menuitem',
|
|
32
|
-
'aria-haspopup': '
|
|
51
|
+
'aria-haspopup': 'true',
|
|
33
52
|
'aria-expanded': this.expandedChild?.item === this.parsedItem,
|
|
34
|
-
}
|
|
35
|
-
}
|
|
53
|
+
};
|
|
54
|
+
}
|
|
36
55
|
}
|
|
37
56
|
toggle() {
|
|
38
57
|
this.onItemClick(this.parsedItem);
|
|
58
|
+
this.cd.markForCheck();
|
|
59
|
+
}
|
|
60
|
+
listenPointerOver() {
|
|
61
|
+
const target = this.anchorElement;
|
|
62
|
+
const listener = this.renderer.listen(target, 'pointerover', (event) => {
|
|
63
|
+
this.onItemPointerEnter(this.parsedItem);
|
|
64
|
+
this.cd.markForCheck();
|
|
65
|
+
});
|
|
66
|
+
this.destroyRef.onDestroy(() => listener());
|
|
39
67
|
}
|
|
40
68
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
41
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuComponent, selector: "rdt-menu", inputs: { dataTestId: "dataTestId",
|
|
69
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuComponent, selector: "rdt-menu", inputs: { trigger: "trigger", dataTestId: "dataTestId", items: "items" }, providers: [
|
|
42
70
|
{
|
|
43
71
|
provide: RdtMenuBaseComponent,
|
|
44
72
|
useExisting: RdtMenuComponent,
|
|
45
73
|
},
|
|
46
|
-
], usesInheritance: true, ngImport: i0, template: "<
|
|
74
|
+
], usesInheritance: true, ngImport: i0, template: "<rdt-menu-overlay\r\n *ngIf=\"parsedItem\"\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", 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
47
75
|
}
|
|
48
76
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, decorators: [{
|
|
49
77
|
type: Component,
|
|
@@ -52,11 +80,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
52
80
|
provide: RdtMenuBaseComponent,
|
|
53
81
|
useExisting: RdtMenuComponent,
|
|
54
82
|
},
|
|
55
|
-
], template: "<
|
|
56
|
-
}], propDecorators: {
|
|
83
|
+
], template: "<rdt-menu-overlay\r\n *ngIf=\"parsedItem\"\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", 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"] }]
|
|
84
|
+
}], propDecorators: { trigger: [{
|
|
85
|
+
type: Input,
|
|
86
|
+
args: [{ required: true }]
|
|
87
|
+
}], dataTestId: [{
|
|
57
88
|
type: Input
|
|
58
|
-
}],
|
|
89
|
+
}], items: [{
|
|
59
90
|
type: Input,
|
|
60
91
|
args: [{ required: true }]
|
|
61
92
|
}] } });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
93
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmR0LW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vQG5ncmR0L21lbnUvc3JjL2xpYi9tZW51L3JkdC1tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL0BuZ3JkdC9tZW51L3NyYy9saWIvbWVudS9yZHQtbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFHVCxNQUFNLEVBQ04sS0FBSyxFQUVMLFNBQVMsRUFDVCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHdCQUF3QixFQUFvQixNQUFNLGVBQWUsQ0FBQztBQUMzRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUU1RSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7QUFlbkQsTUFBTSxPQUFPLGdCQUNYLFNBQVEsb0JBQW9CO0lBR1QsV0FBVyxHQUFHLE1BQU0sQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO0lBR2xFLE9BQU8sQ0FBb0I7SUFHM0IsVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUVoQixJQUNJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUNELElBQUksS0FBSyxDQUFDLEtBQW9CO1FBQzVCLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLE1BQU0sT0FBTyxHQUFnQjtZQUMzQixLQUFLLEVBQUUsRUFBRTtZQUNULElBQUksRUFBRSxFQUFFO1lBQ1IsS0FBSyxFQUFFLEtBQUs7U0FDYixDQUFDO1FBQ0YsSUFBSSxDQUFDLGNBQWMsR0FBRyxjQUFjLENBQUMsQ0FBQyxPQUFPLENBQUMsRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDL0QsSUFBSSxDQUFDLFdBQVcsRUFBRSxD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QUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXHJcbiAgQ29tcG9uZW50LFxyXG4gIERvQ2hlY2ssXHJcbiAgRWxlbWVudFJlZixcclxuICBpbmplY3QsXHJcbiAgSW5wdXQsXHJcbiAgT25Jbml0LFxyXG4gIFF1ZXJ5TGlzdCxcclxuICBWaWV3RW5jYXBzdWxhdGlvbixcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgUkRUX0JVVFRPTl9CQVNFX1BST1ZJREVSLCBSZHRCdXR0b25CYXNlSW50IH0gZnJvbSAnQG5ncmR0L2J1dHRvbic7XHJcbmltcG9ydCB7IFJkdE1lbnVCYXNlQ29tcG9uZW50IH0gZnJvbSAnLi4vbWVudS1iYXNlL3JkdC1tZW51LWJhc2UuY29tcG9uZW50JztcclxuaW1wb3J0IHsgUmR0TWVudUl0ZW0gfSBmcm9tICcuLi9tb2RlbHMnO1xyXG5pbXBvcnQgeyBwYXJzZU1lbnVJdGVtcyB9IGZyb20gJy4uL3ByaXZhdGUtbW9kZWxzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAncmR0LW1lbnUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9yZHQtbWVudS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3JkdC1tZW51LmNvbXBvbmVudC5zY3NzJyxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAge1xyXG4gICAgICBwcm92aWRlOiBSZHRNZW51QmFzZUNvbXBvbmVudCxcclxuICAgICAgdXNlRXhpc3Rpbmc6IFJkdE1lbnVDb21wb25lbnQsXHJcbiAgICB9LFxyXG4gIF0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBSZHRNZW51Q29tcG9uZW50XHJcbiAgZXh0ZW5kcyBSZHRNZW51QmFzZUNvbXBvbmVudFxyXG4gIGltcGxlbWVudHMgT25Jbml0LCBEb0NoZWNrXHJcbntcclxuICBwcm90ZWN0ZWQgcmVhZG9ubHkgYnV0dG9uQ2xhc3MgPSBpbmplY3QoUkRUX0JVVFRPTl9CQVNFX1BST1ZJREVSKTtcclxuXHJcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSlcclxuICB0cmlnZ2VyITogUmR0QnV0dG9uQmFzZUludDtcclxuXHJcbiAgQElucHV0KClcclxuICBkYXRhVGVzdElkID0gJyc7XHJcblxyXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pXHJcbiAgZ2V0IGl0ZW1zKCkge1xyXG4gICAgcmV0dXJuIHRoaXMuX2l0ZW1zO1xyXG4gIH1cclxuICBzZXQgaXRlbXModmFsdWU6IFJkdE1lbnVJdGVtW10pIHtcclxuICAgIHRoaXMuX2l0ZW1zID0gdmFsdWU7XHJcbiAgICBjb25zdCB3cmFwcGVyOiBSZHRNZW51SXRlbSA9IHtcclxuICAgICAgbGFiZWw6ICcnLFxyXG4gICAgICBpY29uOiAnJyxcclxuICAgICAgaXRlbXM6IHZhbHVlLFxyXG4gICAgfTtcclxuICAgIHRoaXMuYWxsUGFyc2VkSXRlbXMgPSBwYXJzZU1lbnVJdGVtcyhbd3JhcHBlcl0sIHRoaXMuaW5qZWN0b3IpO1xyXG4gICAgdGhpcy5maWx0ZXJJdGVtcygpO1xyXG4gIH1cclxuICBwcml2YXRlIF9pdGVtcyE6IFJkdE1lbnVJdGVtW107XHJcblxyXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZWFkb25seSBmb2N1c2FibGVFbGVtZW50cyA9IG5ldyBRdWVyeUxpc3Q8XHJcbiAgICBFbGVtZW50UmVmPEhUTUxFbGVtZW50PlxyXG4gID4oKTtcclxuXHJcbiAgb3ZlcnJpZGUgZ2V0IGJ1dHRvbkNvbnRhaW5lcigpOiBIVE1MRWxlbWVudCB8IHVuZGVmaW5lZCB7XHJcbiAgICByZXR1cm4gdGhpcy5hbmNob3JFbGVtZW50ID8/IHVuZGVmaW5lZDtcclxuICB9XHJcblxyXG4gIGdldCBwYXJzZWRJdGVtKCkge1xyXG4gICAgcmV0dXJuIHRoaXMucGFyc2VkSXRlbXNbMF07XHJcbiAgfVxyXG5cclxuICBnZXQgYW5jaG9yRWxlbWVudCgpIHtcclxuICAgIHJldHVybiB0aGlzLnRyaWdnZXIuYW5jaG9yRWxlbWVudDtcclxuICB9XHJcblxyXG4gIG92ZXJyaWRlIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgc3VwZXIubmdPbkluaXQoKTtcclxuICAgIHRoaXMudHJpZ2dlci50YWJJbmRleCA9IDA7XHJcbiAgICB0aGlzLnRyaWdnZXIuZGF0YVRlc3RJZCA9IHRoaXMuZGF0YVRlc3RJZDtcclxuICAgIHRoaXMudHJpZ2dlci5jbGljayQuc3Vic2NyaWJlKCgpID0+IHRoaXMudG9nZ2xlKCkpO1xyXG4gICAgdGhpcy5saXN0ZW5Qb2ludGVyT3ZlcigpO1xyXG4gICAgaWYgKHRoaXMuYW5jaG9yRWxlbWVudCkge1xyXG4gICAgICBjb25zb2xlLmxvZygnQW5jaG9yIGVsZW1lbnQ6JywgdGhpcy5hbmNob3JFbGVtZW50KTtcclxuICAgICAgdGhpcy5mb2N1c2FibGVFbGVtZW50cy5yZXNldChbeyBuYXRpdmVFbGVtZW50OiB0aGlzLmFuY2hvckVsZW1lbnQgfV0pO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdEb0NoZWNrKCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMudHJpZ2dlcikge1xyXG4gICAgICB0aGlzLnRyaWdnZXIuYXJpYSA9IHtcclxuICAgICAgICByb2xlOiAnbWVudWl0ZW0nLFxyXG4gICAgICAgICdhcmlhLWhhc3BvcHVwJzogJ3RydWUnLFxyXG4gICAgICAgICdhcmlhLWV4cGFuZGVkJzogdGhpcy5leHBhbmRlZENoaWxkPy5pdGVtID09PSB0aGlzLnBhcnNlZEl0ZW0sXHJcbiAgICAgIH07XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICB0b2dnbGUoKSB7XHJcbiAgICB0aGlzLm9uSXRlbUNsaWNrKHRoaXMucGFyc2VkSXRlbSk7XHJcbiAgICB0aGlzLmNkLm1hcmtGb3JDaGVjaygpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBsaXN0ZW5Qb2ludGVyT3ZlcigpIHtcclxuICAgIGNvbnN0IHRhcmdldCA9IHRoaXMuYW5jaG9yRWxlbWVudDtcclxuICAgIGNvbnN0IGxpc3RlbmVyID0gdGhpcy5yZW5kZXJlci5saXN0ZW4odGFyZ2V0LCAncG9pbnRlcm92ZXInLCAoZXZlbnQpID0+IHtcclxuICAgICAgdGhpcy5vbkl0ZW1Qb2ludGVyRW50ZXIodGhpcy5wYXJzZWRJdGVtKTtcclxuICAgICAgdGhpcy5jZC5tYXJrRm9yQ2hlY2soKTtcclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMuZGVzdHJveVJlZi5vbkRlc3Ryb3koKCkgPT4gbGlzdGVuZXIoKSk7XHJcbiAgfVxyXG59XHJcbiIsIjxyZHQtbWVudS1vdmVybGF5XHJcbiAgKm5nSWY9XCJwYXJzZWRJdGVtXCJcclxuICBbYW5jaG9yRWxlbWVudF09XCJhbmNob3JFbGVtZW50IVwiXHJcbiAgW2l0ZW1dPVwiJGFueShwYXJzZWRJdGVtKVwiXHJcbiAgW2V4cGFuZGVkXT1cImV4cGFuZGVkQ2hpbGQ/Lml0ZW0gPT09IHBhcnNlZEl0ZW1cIlxyXG4gIFthdXRvZm9jdXNJdGVtXT1cImF1dG9mb2N1c1N1Ym1lbnVJdGVtXCJcclxuICBbcHJlZmVycmVkSG9yaXpvbnRhbERpcl09XCJwcmVmZXJyZWRIb3Jpem9udGFsRGlyXCJcclxuICBbcHJlZmVycmVkVmVydGljYWxEaXJdPVwicHJlZmVycmVkVmVydGljYWxEaXJcIlxyXG4gIFtsZXZlbF09XCIwXCJcclxuLz5cclxuIl19
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, HostBinding, Input, numberAttribute, ViewEncapsulation, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, numberAttribute, ViewChild, ViewEncapsulation, } from '@angular/core';
|
|
2
2
|
import { RdtMenuBaseComponent } from '../menu-base/rdt-menu-base.component';
|
|
3
3
|
import { parseMenuItems } from '../private-models';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -8,6 +8,10 @@ import * as i3 from "@ngrdt/router";
|
|
|
8
8
|
import * as i4 from "@ngrdt/shortcuts";
|
|
9
9
|
import * as i5 from "../menu-overlay/rdt-menu-overlay.component";
|
|
10
10
|
export class RdtMenuBarComponent extends RdtMenuBaseComponent {
|
|
11
|
+
buttonContainerRef;
|
|
12
|
+
get buttonContainer() {
|
|
13
|
+
return this.buttonContainerRef?.nativeElement;
|
|
14
|
+
}
|
|
11
15
|
get items() {
|
|
12
16
|
return this._items;
|
|
13
17
|
}
|
|
@@ -26,7 +30,7 @@ export class RdtMenuBarComponent extends RdtMenuBaseComponent {
|
|
|
26
30
|
provide: RdtMenuBaseComponent,
|
|
27
31
|
useExisting: RdtMenuBarComponent,
|
|
28
32
|
},
|
|
29
|
-
], 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\"
|
|
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);outline:var(--rdt-menu-bar-item-outline);font-size:inherit}.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 });
|
|
30
34
|
}
|
|
31
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
|
|
32
36
|
type: Component,
|
|
@@ -35,8 +39,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
35
39
|
provide: RdtMenuBaseComponent,
|
|
36
40
|
useExisting: RdtMenuBarComponent,
|
|
37
41
|
},
|
|
38
|
-
], 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\"
|
|
39
|
-
}], propDecorators: {
|
|
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);outline:var(--rdt-menu-bar-item-outline);font-size:inherit}.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
|
+
}], propDecorators: { buttonContainerRef: [{
|
|
44
|
+
type: ViewChild,
|
|
45
|
+
args: ['buttonContainer', { static: true }]
|
|
46
|
+
}], items: [{
|
|
40
47
|
type: Input
|
|
41
48
|
}], headerHeight: [{
|
|
42
49
|
type: Input,
|
|
@@ -48,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
48
55
|
type: HostBinding,
|
|
49
56
|
args: ['attr.role']
|
|
50
57
|
}] } });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmR0LW1lbnUtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL0BuZ3JkdC9tZW51L3NyYy9saWIvbWVudS1iYXIvcmR0LW1lbnUtYmFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL0BuZ3JkdC9tZW51L3NyYy9saWIvbWVudS1iYXIvcmR0LW1lbnUtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsS0FBSyxFQUNMLGVBQWUsRUFDZixTQUFTLEVBQ1QsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBRTVFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7Ozs7OztBQWVuRCxNQUFNLE9BQU8sbUJBQW9CLFNBQVEsb0JBQW9CO0lBRTNELGtCQUFrQixDQUEyQjtJQUU3QyxJQUFJLGVBQWU7UUFDakIsT0FBTyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsYUFBYSxDQUFDO0lBQ2hELENBQUM7SUFFRCxJQUNJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUNELElBQUksS0FBSyxDQUFDLEtBQW9CO1FBQzVCLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxjQUFjLEdBQUcsY0FBYyxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDM0QsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFDTyxNQUFNLENBQWlCO0lBRy9CLFlBQVksR0FBRyxDQUFDLENBQUM7SUFHakIsWUFBWSxHQUFHLENBQUMsQ0FBQztJQUdULFFBQVEsR0FBRyxTQUFTLENBQUM7dUdBMUJsQixtQkFBbUI7MkZBQW5CLG1CQUFtQixxR0FtQlYsZUFBZSxrREFHZixlQUFlLHdFQTdCeEI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsb0JBQW9CO2dCQUM3QixXQUFXLEVBQUUsbUJBQW1CO2FBQ2pDO1NBQ0Ysc0xDekJILHM0R0FrSEE7OzJGRHZGYSxtQkFBbUI7a0JBYi9CLFNBQVM7K0JBQ0UsY0FBYyxtQkFHUCx1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJLGFBQzFCO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxvQkFBb0I7NEJBQzdCLFdBQVcscUJBQXFCO3lCQUNqQztxQkFDRjs4QkFJRCxrQkFBa0I7c0JBRGpCLFNBQVM7dUJBQUMsaUJBQWlCLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO2dCQVExQyxLQUFLO3NCQURSLEtBQUs7Z0JBWU4sWUFBWTtzQkFEWCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRTtnQkFJckMsWUFBWTtzQkFEWCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRTtnQkFJN0IsUUFBUTtzQkFEZixXQUFXO3VCQUFDLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gIENvbXBvbmVudCxcclxuICBFbGVtZW50UmVmLFxyXG4gIEhvc3RCaW5kaW5nLFxyXG4gIElucHV0LFxyXG4gIG51bWJlckF0dHJpYnV0ZSxcclxuICBWaWV3Q2hpbGQsXHJcbiAgVmlld0VuY2Fwc3VsYXRpb24sXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFJkdE1lbnVCYXNlQ29tcG9uZW50IH0gZnJvbSAnLi4vbWVudS1iYXNlL3JkdC1tZW51LWJhc2UuY29tcG9uZW50JztcclxuaW1wb3J0IHsgUmR0TWVudUl0ZW0gfSBmcm9tICcuLi9tb2RlbHMnO1xyXG5pbXBvcnQgeyBwYXJzZU1lbnVJdGVtcyB9IGZyb20gJy4uL3ByaXZhdGUtbW9kZWxzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAncmR0LW1lbnUtYmFyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcmR0LW1lbnUtYmFyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vcmR0LW1lbnUtYmFyLmNvbXBvbmVudC5zY3NzJyxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAge1xyXG4gICAgICBwcm92aWRlOiBSZHRNZW51QmFzZUNvbXBvbmVudCxcclxuICAgICAgdXNlRXhpc3Rpbmc6IFJkdE1lbnVCYXJDb21wb25lbnQsXHJcbiAgICB9LFxyXG4gIF0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBSZHRNZW51QmFyQ29tcG9uZW50IGV4dGVuZHMgUmR0TWVudUJhc2VDb21wb25lbnQge1xyXG4gIEBWaWV3Q2hpbGQoJ2J1dHRvbkNvbnRhaW5lcicsIHsgc3RhdGljOiB0cnVlIH0pXHJcbiAgYnV0dG9uQ29udGFpbmVyUmVmPzogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XHJcblxyXG4gIGdldCBidXR0b25Db250YWluZXIoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5idXR0b25Db250YWluZXJSZWY/Lm5hdGl2ZUVsZW1lbnQ7XHJcbiAgfVxyXG5cclxuICBASW5wdXQoKVxyXG4gIGdldCBpdGVtcygpIHtcclxuICAgIHJldHVybiB0aGlzLl9pdGVtcztcclxuICB9XHJcbiAgc2V0IGl0ZW1zKHZhbHVlOiBSZHRNZW51SXRlbVtdKSB7XHJcbiAgICB0aGlzLl9pdGVtcyA9IHZhbHVlO1xyXG4gICAgdGhpcy5hbGxQYXJzZWRJdGVtcyA9IHBhcnNlTWVudUl0ZW1zKHZhbHVlLCB0aGlzLmluamVjdG9yKTtcclxuICAgIHRoaXMuZmlsdGVySXRlbXMoKTtcclxuICB9XHJcbiAgcHJpdmF0ZSBfaXRlbXMhOiBSZHRNZW51SXRlbVtdO1xyXG5cclxuICBASW5wdXQoeyB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSB9KVxyXG4gIGhlYWRlckhlaWdodCA9IDA7XHJcblxyXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogbnVtYmVyQXR0cmlidXRlIH0pXHJcbiAgZm9vdGVySGVpZ2h0ID0gMDtcclxuXHJcbiAgQEhvc3RCaW5kaW5nKCdhdHRyLnJvbGUnKVxyXG4gIHByaXZhdGUgcm9sZUF0dHIgPSAnbWVudWJhcic7XHJcbn1cclxuIiwiPHVsIGNsYXNzPVwibWVudS1iYXItaXRlbS1jb250YWluZXJcIiByb2xlPVwicHJlc2VudGF0aW9uXCIgI2J1dHRvbkNvbnRhaW5lcj5cclxuICBAZm9yKGl0ZW0gb2YgcGFyc2VkSXRlbXM7IHRyYWNrIGl0ZW07IGxldCBpID0gJGluZGV4KSB7XHJcbiAgPGxpXHJcbiAgICBjbGFzcz1cIm1lbnUtYmFyLWl0ZW1cIlxyXG4gICAgcm9sZT1cInByZXNlbnRhdGlvblwiXHJcbiAgICByZHRBbnlSb3V0ZUFjdGl2ZT1cIm1lbnUtYmFyLWl0ZW0tcm91dGUtYWN0aXZlXCJcclxuICAgIFt3YXRjaGVkUm91dGVzXT1cImdldENoaWxkUm91dGVzKGl0ZW0pXCJcclxuICAgIChyZHRLZXlMaXN0ZW5lcik9XCJvbktleURvd24oaSwgJGV2ZW50KVwiXHJcbiAgICAjYW5jaG9yRWxcclxuICA+XHJcbiAgICBAaWYoIWl0ZW0ucm91dGVyTGluayAmJiAhaXRlbS5leHRlcm5hbExpbmspIHtcclxuICAgIDxidXR0b25cclxuICAgICAgI2ZvY3VzYWJsZUl0ZW1cclxuICAgICAgY2xhc3M9XCJtZW51LWJhci1pdGVtLWNvbnRlbnRcIlxyXG4gICAgICByb2xlPVwibWVudWl0ZW1cIlxyXG4gICAgICAoY2xpY2spPVwib25JdGVtQ2xpY2soaXRlbSlcIlxyXG4gICAgICAocG9pbnRlcmVudGVyKT1cIm9uSXRlbVBvaW50ZXJFbnRlcihpdGVtKVwiXHJcbiAgICAgIFthdHRyLmFyaWEtaGFzcG9wdXBdPVwiaXRlbS5pdGVtcyA/ICdtZW51JyA6IG51bGxcIlxyXG4gICAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cIml0ZW0gPT09IGV4cGFuZGVkQ2hpbGQ/Lml0ZW1cIlxyXG4gICAgICBbYXR0ci50YWJpbmRleF09XCIwXCJcclxuICAgICAgW2F0dHIuZGF0YS10ZXN0aWRdPVwiaXRlbS5kYXRhVGVzdElkXCJcclxuICAgID5cclxuICAgICAge3sgaXRlbS5sYWJlbCB9fVxyXG5cclxuICAgICAgPGRpdiBjbGFzcz1cIm1lbnUtYmFyLWl0ZW0tcmlnaHQtY29udGVudFwiPlxyXG4gICAgICAgIEBpZihpdGVtLnNob3J0Y3V0KSB7XHJcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJtZW51LWl0ZW0tc2hvcnRjdXRcIj5cclxuICAgICAgICAgIHt7IGl0ZW0uc2hvcnRjdXQubGFiZWwgfX1cclxuICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgfVxyXG4gICAgICAgIDwhLS0gVE9ET1xyXG4gICAgICAgICAgPHJkdC1pY29uXHJcbiAgICAgICAgICAgICpuZ0lmPVwiaXRlbS5pdGVtc1wiXHJcbiAgICAgICAgICAgIG5hbWU9XCJleHBhbmRfbW9yZVwiXHJcbiAgICAgICAgICAgIGNsYXNzPVwibWVudS1iYXItaXRlbS1pY29uXCJcclxuICAgICAgICAgICAgaW52ZXJ0ZWRcclxuICAgICAgICAgIC8+XHJcbiAgICAgICAgICA8cmR0LWljb25cclxuICAgICAgICAgICAgKm5nSWY9XCJpdGVtLmljb25cIlxyXG4gICAgICAgICAgICBbbmFtZV09XCJpdGVtLmljb25cIlxyXG4gICAgICAgICAgICBjbGFzcz1cIm1lbnUtYmFyLWl0ZW0taWNvblwiXHJcbiAgICAgICAgICAgIGludmVydGVkXHJcbiAgICAgICAgICAvPlxyXG4gICAgICAgIC0tPlxyXG4gICAgICAgIEBpZihpdGVtLml0ZW1zKSB7XHJcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJtZW51LWJhci1pdGVtLWljb24gcmR0LW1lbnUtaWNvbi1kb3duXCI+PC9zcGFuPlxyXG4gICAgICAgIH1cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2J1dHRvbj5cclxuICAgIH1cclxuXHJcbiAgICA8bmctdGVtcGxhdGUgI2xpbmtCb2R5IGxldC1pdGVtPlxyXG4gICAgICB7eyBpdGVtLmxhYmVsIH19XHJcblxyXG4gICAgICA8ZGl2IGNsYXNzPVwibWVudS1iYXItaXRlbS1yaWdodC1jb250ZW50XCI+XHJcbiAgICAgICAgQGlmKGl0ZW0uc2hvcnRjdXQpIHtcclxuICAgICAgICA8c3BhbiBjbGFzcz1cIm1lbnUtaXRlbS1zaG9ydGN1dFwiPlxyXG4gICAgICAgICAge3sgaXRlbS5zaG9ydGN1dC5sYWJlbCB9fVxyXG4gICAgICAgIDwvc3Bhbj5cclxuICAgICAgICB9XHJcbiAgICAgICAgPCEtLVxyXG4gICAgICAgIDxyZHQtaWNvblxyXG4gICAgICAgICAgKm5nSWY9XCJpdGVtLmljb25cIlxyXG4gICAgICAgICAgW25hbWVdPVwiaXRlbS5pY29uXCJcclxuICAgICAgICAgIGNsYXNzPVwibWVudS1iYXItaXRlbS1pY29uXCJcclxuICAgICAgICAgIGludmVydGVkXHJcbiAgICAgICAgLz5cclxuICAgICAgLS0+PC9kaXY+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgIEBpZihpdGVtLnJvdXRlckxpbmspIHtcclxuICAgIDxhXHJcbiAgICAgICNmb2N1c2FibGVJdGVtXHJcbiAgICAgIGNsYXNzPVwibWVudS1iYXItaXRlbS1jb250ZW50XCJcclxuICAgICAgcm9sZT1cIm1lbnVpdGVtXCJcclxuICAgICAgKGNsaWNrKT1cIm9uSXRlbUNsaWNrKGl0ZW0pXCJcclxuICAgICAgW3JvdXRlckxpbmtdPVwiaXRlbS5yb3V0ZXJMaW5rXCJcclxuICAgICAgW3RhcmdldF09XCJpdGVtLnRhcmdldCFcIlxyXG4gICAgICBbYXR0ci50YWJpbmRleF09XCIwXCJcclxuICAgICAgW2F0dHIuZGF0YS10ZXN0aWRdPVwiaXRlbS5kYXRhVGVzdElkXCJcclxuICAgID5cclxuICAgICAgPG5nLWNvbnRhaW5lclxyXG4gICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwibGlua0JvZHk7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBpdGVtIH1cIlxyXG4gICAgICAvPlxyXG4gICAgPC9hPlxyXG4gICAgfSBAaWYoaXRlbS5leHRlcm5hbExpbmspIHtcclxuICAgIDxhXHJcbiAgICAgICNmb2N1c2FibGVJdGVtXHJcbiAgICAgIGNsYXNzPVwibWVudS1iYXItaXRlbS1jb250ZW50XCJcclxuICAgICAgcm9sZT1cIm1lbnVpdGVtXCJcclxuICAgICAgKGNsaWNrKT1cIm9uSXRlbUNsaWNrKGl0ZW0pXCJcclxuICAgICAgW2hyZWZdPVwiaXRlbS5leHRlcm5hbExpbmtcIlxyXG4gICAgICBbdGFyZ2V0XT1cIml0ZW0udGFyZ2V0XCJcclxuICAgICAgW2F0dHIudGFiaW5kZXhdPVwiMFwiXHJcbiAgICAgIFthdHRyLmRhdGEtdGVzdGlkXT1cIml0ZW0uZGF0YVRlc3RJZFwiXHJcbiAgICA+XHJcbiAgICAgIDxuZy1jb250YWluZXJcclxuICAgICAgICAqbmdUZW1wbGF0ZU91dGxldD1cImxpbmtCb2R5OyBjb250ZXh0OiB7ICRpbXBsaWNpdDogaXRlbSB9XCJcclxuICAgICAgLz5cclxuICAgIDwvYT5cclxuICAgIH0gQGlmIChpdGVtLml0ZW1zKSB7XHJcbiAgICA8cmR0LW1lbnUtb3ZlcmxheVxyXG4gICAgICBbaXRlbV09XCIkYW55KGl0ZW0pXCJcclxuICAgICAgW2V4cGFuZGVkXT1cIml0ZW0gPT09IGV4cGFuZGVkQ2hpbGQ/Lml0ZW1cIlxyXG4gICAgICBbYXV0b2ZvY3VzSXRlbV09XCJhdXRvZm9jdXNTdWJtZW51SXRlbVwiXHJcbiAgICAgIFtwcmVmZXJyZWRIb3Jpem9udGFsRGlyXT1cInByZWZlcnJlZEhvcml6b250YWxEaXJcIlxyXG4gICAgICBbcHJlZmVycmVkVmVydGljYWxEaXJdPVwicHJlZmVycmVkVmVydGljYWxEaXJcIlxyXG4gICAgICBbbGV2ZWxdPVwiMFwiXHJcbiAgICAgIFthbmNob3JFbGVtZW50XT1cImFuY2hvckVsXCJcclxuICAgIC8+XHJcbiAgICB9XHJcbiAgPC9saT5cclxuICB9XHJcbjwvdWw+XHJcbiJdfQ==
|