@exmg/exm-navigation 1.1.36 → 1.2.0
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/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-base.d.ts +141 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-base.js +506 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-base.d.ts +14 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-base.js +65 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-menu-base.d.ts +12 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-menu-base.js +45 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-menu.d.ts +9 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-menu.js +12 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-nav-item-base.d.ts +14 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-nav-item-base.js +49 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-nav-item.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-nav-item.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-base.d.ts +7 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-base.js +20 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-button-base.d.ts +9 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-button-base.js +36 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-button.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-button.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-base.d.ts +12 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-base.js +62 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-nav-item-base.d.ts +12 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-nav-item-base.js +37 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-nav-item.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-nav-item.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-sub-menu-base.d.ts +28 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-sub-menu-base.js +153 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-sub-menu.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-sub-menu.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-topbar-base.d.ts +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-topbar-base.js +33 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-topbar.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-topbar.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation.js +10 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/index.d.ts +12 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/index.js +13 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/mixins/media-queries.d.ts +8 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/mixins/media-queries.js +57 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-css.js +75 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-css.js +32 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-nav-item-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-nav-item-css.js +84 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-button-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-button-css.js +29 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-css.js +22 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-css.js +59 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-nav-item-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-nav-item-css.js +94 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-sub-menu-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-sub-menu-css.js +24 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-topbar-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-topbar-css.js +30 -0
- package/.rollup.cache/root/repo/packages/exm-navigation/dist/types.d.ts +10 -0
- package/dist/exm-navigation-base.js +7 -6
- package/dist/exm-navigation-drawer-base.js +6 -3
- package/dist/exm-navigation-drawer-menu-base.js +6 -3
- package/dist/exm-navigation-drawer-menu.js +4 -2
- package/dist/exm-navigation-drawer-nav-item-base.js +7 -4
- package/dist/exm-navigation-drawer-nav-item.js +4 -2
- package/dist/exm-navigation-drawer.js +4 -2
- package/dist/exm-navigation-icon-base.js +6 -4
- package/dist/exm-navigation-icon-button-base.js +7 -4
- package/dist/exm-navigation-icon-button.js +4 -2
- package/dist/exm-navigation-icon.js +4 -2
- package/dist/exm-navigation-rail-base.js +6 -3
- package/dist/exm-navigation-rail-nav-item-base.js +6 -3
- package/dist/exm-navigation-rail-nav-item.js +4 -2
- package/dist/exm-navigation-rail.js +4 -2
- package/dist/exm-navigation-sub-menu-base.js +8 -5
- package/dist/exm-navigation-sub-menu.js +4 -2
- package/dist/exm-navigation-topbar-base.js +6 -3
- package/dist/exm-navigation-topbar.js +4 -2
- package/dist/exm-navigation.js +4 -2
- package/dist/index.js +1 -1
- package/dist/mixins/media-queries.js +6 -3
- package/dist/styles/exm-navigation-css.js +5 -2
- package/dist/styles/exm-navigation-drawer-css.js +5 -2
- package/dist/styles/exm-navigation-drawer-nav-item-css.js +5 -2
- package/dist/styles/exm-navigation-icon-button-css.js +5 -2
- package/dist/styles/exm-navigation-icon-css.js +5 -2
- package/dist/styles/exm-navigation-rail-css.js +5 -2
- package/dist/styles/exm-navigation-rail-nav-item-css.js +5 -2
- package/dist/styles/exm-navigation-sub-menu-css.js +5 -2
- package/dist/styles/exm-navigation-topbar-css.js +5 -2
- package/package.json +2 -2
- /package/{dist → .rollup.cache/root/repo/packages/exm-navigation/dist}/types.js +0 -0
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
4
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
5
|
+
import { repeat } from 'lit/directives/repeat.js';
|
|
6
|
+
import { style } from './styles/exm-navigation-sub-menu-css.js';
|
|
7
|
+
import { animate, fadeOut, fadeIn } from '@lit-labs/motion';
|
|
8
|
+
import './exm-navigation-rail-nav-item.js';
|
|
9
|
+
import './exm-navigation-drawer-nav-item.js';
|
|
10
|
+
import '@material/web/list/list.js';
|
|
11
|
+
import '@exmg/exm-collapsed/exm-collapsed.js';
|
|
12
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
13
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
14
|
+
export class ExmNavigationSubMenuBase extends ExmgElement {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments);
|
|
17
|
+
this.items = [];
|
|
18
|
+
this.path = [];
|
|
19
|
+
this.hasBackButton = false;
|
|
20
|
+
}
|
|
21
|
+
updated(changedProperties) {
|
|
22
|
+
var _a;
|
|
23
|
+
if (changedProperties.has('path') || changedProperties.has('items')) {
|
|
24
|
+
this.currentItem = ((_a = this.items.find((item) => item.id === this.path[0])) === null || _a === void 0 ? void 0 : _a.items) || [];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
connectedCallback() {
|
|
28
|
+
super.connectedCallback();
|
|
29
|
+
}
|
|
30
|
+
disconnectedCallback() {
|
|
31
|
+
if (this.navigationElement) {
|
|
32
|
+
this.navigationElement.classList.remove('show');
|
|
33
|
+
}
|
|
34
|
+
super.disconnectedCallback();
|
|
35
|
+
}
|
|
36
|
+
handleSubMenuItemClick(path) {
|
|
37
|
+
this.fire('sub-menu-item-click', path);
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* If a collapsable menuitem is not selected we can just pass the path.
|
|
41
|
+
* If it is selected, we remove the item from the path to collapse the menu again
|
|
42
|
+
*/
|
|
43
|
+
handleCollapsableSubMenuItemClick(path, id, selected) {
|
|
44
|
+
if (!selected) {
|
|
45
|
+
this.handleSubMenuItemClick(path);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const index = path.findIndex((item) => item === id);
|
|
49
|
+
this.fire('sub-menu-item-click', path.splice(0, index));
|
|
50
|
+
}
|
|
51
|
+
getItemStyle() {
|
|
52
|
+
return {
|
|
53
|
+
'grid-area': `${ExmNavigationSubMenuBase.itemIndex}/1/${ExmNavigationSubMenuBase.itemIndex + 1}/2`,
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
renderSubMenu(item, path) {
|
|
57
|
+
const selected = this.path.includes(item.id);
|
|
58
|
+
return html `
|
|
59
|
+
<exm-navigation-drawer-nav-item
|
|
60
|
+
${animate({
|
|
61
|
+
keyframeOptions: {
|
|
62
|
+
duration: 300,
|
|
63
|
+
},
|
|
64
|
+
out: fadeOut,
|
|
65
|
+
in: fadeIn,
|
|
66
|
+
properties: ['opacity'],
|
|
67
|
+
})}
|
|
68
|
+
style=${styleMap(this.getItemStyle())}
|
|
69
|
+
type="button"
|
|
70
|
+
?selected=${selected}
|
|
71
|
+
class="has-submenu ${this.path.includes(item.id) ? 'selected' : ''}"
|
|
72
|
+
@click=${this.handleCollapsableSubMenuItemClick.bind(this, [...path], item.id, selected)}
|
|
73
|
+
?has-submenu=${true}
|
|
74
|
+
submenu-icon=${this.path.includes(item.id) ? 'expand_less' : 'expand_more'}
|
|
75
|
+
>${item.label}
|
|
76
|
+
</exm-navigation-drawer-nav-item>
|
|
77
|
+
<exm-collapsed id="collapsed" ?opened=${this.path.includes(item.id)}>
|
|
78
|
+
<div class="sub-menu">
|
|
79
|
+
<md-list>
|
|
80
|
+
<!-- Need to check for multiple items -->
|
|
81
|
+
${(item.items || []).map((subItem) => {
|
|
82
|
+
ExmNavigationSubMenuBase.itemIndex += 1;
|
|
83
|
+
return (subItem.items || []).length === 0
|
|
84
|
+
? html `
|
|
85
|
+
<exm-navigation-drawer-nav-item
|
|
86
|
+
style=${styleMap(this.getItemStyle())}
|
|
87
|
+
class="collapsed-item"
|
|
88
|
+
?selected=${this.path.includes(subItem.id)}
|
|
89
|
+
@click=${this.handleSubMenuItemClick.bind(this, [...path, subItem.id])}
|
|
90
|
+
>
|
|
91
|
+
${subItem.label}
|
|
92
|
+
</exm-navigation-drawer-nav-item>
|
|
93
|
+
`
|
|
94
|
+
: this.renderSubMenu(item, [this.path[0] || '', item.id]);
|
|
95
|
+
})}
|
|
96
|
+
</md-list>
|
|
97
|
+
</div>
|
|
98
|
+
</exm-collapsed>
|
|
99
|
+
`;
|
|
100
|
+
}
|
|
101
|
+
render() {
|
|
102
|
+
const navClass = { nav: true, 'has-back-button': this.hasBackButton };
|
|
103
|
+
ExmNavigationSubMenuBase.itemIndex = 0;
|
|
104
|
+
return html `<div class="top"><slot name="top"></slot></div>
|
|
105
|
+
<nav id="exm-navigation-sub-menu" class=${classMap(navClass)}>
|
|
106
|
+
<md-list>
|
|
107
|
+
${repeat(this.currentItem || [], ({ id }) => id, (item) => {
|
|
108
|
+
ExmNavigationSubMenuBase.itemIndex += 1;
|
|
109
|
+
return (item.items || []).length === 0
|
|
110
|
+
? html `
|
|
111
|
+
<exm-navigation-drawer-nav-item
|
|
112
|
+
${animate({
|
|
113
|
+
keyframeOptions: {
|
|
114
|
+
duration: 300,
|
|
115
|
+
},
|
|
116
|
+
stabilizeOut: true,
|
|
117
|
+
out: fadeOut,
|
|
118
|
+
in: fadeIn,
|
|
119
|
+
properties: ['opacity'],
|
|
120
|
+
})}
|
|
121
|
+
style="${styleMap(this.getItemStyle())}"
|
|
122
|
+
type="button"
|
|
123
|
+
?selected=${this.path.includes(item.id)}
|
|
124
|
+
@click=${this.handleSubMenuItemClick.bind(this, [this.path[0] || '', item.id])}
|
|
125
|
+
>
|
|
126
|
+
${item.label}
|
|
127
|
+
</exm-navigation-drawer-nav-item>
|
|
128
|
+
`
|
|
129
|
+
: this.renderSubMenu(item, [this.path[0] || '', item.id]);
|
|
130
|
+
})}
|
|
131
|
+
</md-list>
|
|
132
|
+
</nav>
|
|
133
|
+
<div class="bottom"><slot name="bottom"></slot></div>`;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
ExmNavigationSubMenuBase.itemIndex = 0;
|
|
137
|
+
ExmNavigationSubMenuBase.styles = [style];
|
|
138
|
+
__decorate([
|
|
139
|
+
property({ type: Array })
|
|
140
|
+
], ExmNavigationSubMenuBase.prototype, "items", void 0);
|
|
141
|
+
__decorate([
|
|
142
|
+
property({ type: Array })
|
|
143
|
+
], ExmNavigationSubMenuBase.prototype, "path", void 0);
|
|
144
|
+
__decorate([
|
|
145
|
+
property({ type: Boolean, attribute: 'has-back-button' })
|
|
146
|
+
], ExmNavigationSubMenuBase.prototype, "hasBackButton", void 0);
|
|
147
|
+
__decorate([
|
|
148
|
+
state()
|
|
149
|
+
], ExmNavigationSubMenuBase.prototype, "currentItem", void 0);
|
|
150
|
+
__decorate([
|
|
151
|
+
query('nav')
|
|
152
|
+
], ExmNavigationSubMenuBase.prototype, "navigationElement", void 0);
|
|
153
|
+
//# sourceMappingURL=exm-navigation-sub-menu-base.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
|
|
2
|
+
export declare class ExmNavigationSubMenu extends ExmNavigationSubMenuBase {
|
|
3
|
+
}
|
|
4
|
+
declare global {
|
|
5
|
+
interface HTMLElementTagNameMap {
|
|
6
|
+
'exm-navigation-sub-menu': ExmNavigationSubMenu;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators/custom-element.js';
|
|
3
|
+
import { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
|
|
4
|
+
let ExmNavigationSubMenu = class ExmNavigationSubMenu extends ExmNavigationSubMenuBase {
|
|
5
|
+
};
|
|
6
|
+
ExmNavigationSubMenu = __decorate([
|
|
7
|
+
customElement('exm-navigation-sub-menu')
|
|
8
|
+
], ExmNavigationSubMenu);
|
|
9
|
+
export { ExmNavigationSubMenu };
|
|
10
|
+
//# sourceMappingURL=exm-navigation-sub-menu.js.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
2
|
+
import { MenuItem } from './types.js';
|
|
3
|
+
import './exm-navigation-rail-nav-item.js';
|
|
4
|
+
export declare class ExmNavigationTopbarBase extends ExmgElement {
|
|
5
|
+
items: MenuItem[];
|
|
6
|
+
drawerOpen: boolean;
|
|
7
|
+
static styles: import("lit").CSSResult[];
|
|
8
|
+
handleMenuButtonClick(itemId: string): void;
|
|
9
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
10
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
4
|
+
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { style } from './styles/exm-navigation-topbar-css.js';
|
|
6
|
+
import './exm-navigation-rail-nav-item.js';
|
|
7
|
+
export class ExmNavigationTopbarBase extends ExmgElement {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(...arguments);
|
|
10
|
+
this.items = [];
|
|
11
|
+
this.drawerOpen = false;
|
|
12
|
+
}
|
|
13
|
+
handleMenuButtonClick(itemId) {
|
|
14
|
+
this.fire('topbar-menu-click', itemId);
|
|
15
|
+
}
|
|
16
|
+
render() {
|
|
17
|
+
return html `
|
|
18
|
+
<md-icon-button @click=${this.handleMenuButtonClick}
|
|
19
|
+
><md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon></md-icon-button
|
|
20
|
+
>
|
|
21
|
+
<slot name="topbar-title" class="topbar-title"></slot>
|
|
22
|
+
<slot name="topbar-actions"></slot>
|
|
23
|
+
`;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
ExmNavigationTopbarBase.styles = [style];
|
|
27
|
+
__decorate([
|
|
28
|
+
property({ type: Array })
|
|
29
|
+
], ExmNavigationTopbarBase.prototype, "items", void 0);
|
|
30
|
+
__decorate([
|
|
31
|
+
property({ type: Boolean, attribute: 'drawer-open' })
|
|
32
|
+
], ExmNavigationTopbarBase.prototype, "drawerOpen", void 0);
|
|
33
|
+
//# sourceMappingURL=exm-navigation-topbar-base.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
|
|
2
|
+
export declare class ExmNavigationTopbar extends ExmNavigationTopbarBase {
|
|
3
|
+
}
|
|
4
|
+
declare global {
|
|
5
|
+
interface HTMLElementTagNameMap {
|
|
6
|
+
'exm-navigation-topbar': ExmNavigationTopbar;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators/custom-element.js';
|
|
3
|
+
import { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
|
|
4
|
+
let ExmNavigationTopbar = class ExmNavigationTopbar extends ExmNavigationTopbarBase {
|
|
5
|
+
};
|
|
6
|
+
ExmNavigationTopbar = __decorate([
|
|
7
|
+
customElement('exm-navigation-topbar')
|
|
8
|
+
], ExmNavigationTopbar);
|
|
9
|
+
export { ExmNavigationTopbar };
|
|
10
|
+
//# sourceMappingURL=exm-navigation-topbar.js.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
import { ExmNavigationBase } from './exm-navigation-base.js';
|
|
4
|
+
let ExmNavigation = class ExmNavigation extends ExmNavigationBase {
|
|
5
|
+
};
|
|
6
|
+
ExmNavigation = __decorate([
|
|
7
|
+
customElement('exm-navigation')
|
|
8
|
+
], ExmNavigation);
|
|
9
|
+
export { ExmNavigation };
|
|
10
|
+
//# sourceMappingURL=exm-navigation.js.map
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { ExmNavigation } from './exm-navigation.js';
|
|
2
|
+
export { ExmNavigationBase } from './exm-navigation-base.js';
|
|
3
|
+
export { ExmNavigationDrawerBase } from './exm-navigation-drawer-base.js';
|
|
4
|
+
export { ExmNavigationDrawerMenuBase } from './exm-navigation-drawer-menu-base.js';
|
|
5
|
+
export { ExmNavigationDrawerNavItemBase } from './exm-navigation-drawer-nav-item-base.js';
|
|
6
|
+
export { ExmNavigationIconBase } from './exm-navigation-icon-base.js';
|
|
7
|
+
export { ExmNavigationIconButtonBase } from './exm-navigation-icon-button-base.js';
|
|
8
|
+
export { ExmNavigationRailBase } from './exm-navigation-rail-base.js';
|
|
9
|
+
export { ExmNavigationRailNavItemBase } from './exm-navigation-rail-nav-item-base.js';
|
|
10
|
+
export { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
|
|
11
|
+
export { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
|
|
12
|
+
export { style as exmgNavigationStyles } from './styles/exm-navigation-css.js';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export { ExmNavigation } from './exm-navigation.js';
|
|
2
|
+
export { ExmNavigationBase } from './exm-navigation-base.js';
|
|
3
|
+
export { ExmNavigationDrawerBase } from './exm-navigation-drawer-base.js';
|
|
4
|
+
export { ExmNavigationDrawerMenuBase } from './exm-navigation-drawer-menu-base.js';
|
|
5
|
+
export { ExmNavigationDrawerNavItemBase } from './exm-navigation-drawer-nav-item-base.js';
|
|
6
|
+
export { ExmNavigationIconBase } from './exm-navigation-icon-base.js';
|
|
7
|
+
export { ExmNavigationIconButtonBase } from './exm-navigation-icon-button-base.js';
|
|
8
|
+
export { ExmNavigationRailBase } from './exm-navigation-rail-base.js';
|
|
9
|
+
export { ExmNavigationRailNavItemBase } from './exm-navigation-rail-nav-item-base.js';
|
|
10
|
+
export { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
|
|
11
|
+
export { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
|
|
12
|
+
export { style as exmgNavigationStyles } from './styles/exm-navigation-css.js';
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
type Constructor<T = {}> = new (...args: any[]) => T;
|
|
3
|
+
type MediaType = 'mobile' | 'tablet' | 'desktop';
|
|
4
|
+
export declare const MediaQueries: <T extends Constructor<LitElement>>(superClass: T) => Constructor<{
|
|
5
|
+
media: MediaType;
|
|
6
|
+
touch: boolean;
|
|
7
|
+
}> & T;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
3
|
+
export const MediaQueries = (superClass) => {
|
|
4
|
+
class MediaQueryClass extends superClass {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(...arguments);
|
|
7
|
+
this.media = 'desktop';
|
|
8
|
+
this.touch = false;
|
|
9
|
+
this.mobileMedia = window.matchMedia('(max-width: 960px)');
|
|
10
|
+
this.tabletMedia = window.matchMedia('(min-width: 961px) and (max-width: 1600px)');
|
|
11
|
+
this.desktopMedia = window.matchMedia('(min-width: 1601px)');
|
|
12
|
+
this.hoverMedia = window.matchMedia('(hover: hover)');
|
|
13
|
+
}
|
|
14
|
+
updateMedia(media) {
|
|
15
|
+
return (mediaMatch) => {
|
|
16
|
+
if (mediaMatch.matches) {
|
|
17
|
+
this.media = media;
|
|
18
|
+
this.requestUpdate();
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
updateTouch() {
|
|
23
|
+
return (mediaMatch) => {
|
|
24
|
+
this.touch = !mediaMatch.matches;
|
|
25
|
+
this.requestUpdate();
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
connectedCallback() {
|
|
29
|
+
super.connectedCallback();
|
|
30
|
+
// @ts-ignore
|
|
31
|
+
this.updateMedia('mobile')(this.mobileMedia);
|
|
32
|
+
// @ts-ignore
|
|
33
|
+
this.updateMedia('tablet')(this.tabletMedia);
|
|
34
|
+
// @ts-ignore
|
|
35
|
+
this.updateMedia('desktop')(this.desktopMedia);
|
|
36
|
+
// @ts-ignore
|
|
37
|
+
this.updateTouch()(this.hoverMedia);
|
|
38
|
+
this.mobileMedia.addEventListener('change', this.updateMedia('mobile').bind(this));
|
|
39
|
+
this.tabletMedia.addEventListener('change', this.updateMedia('tablet').bind(this));
|
|
40
|
+
this.desktopMedia.addEventListener('change', this.updateMedia('desktop').bind(this));
|
|
41
|
+
this.hoverMedia.addEventListener('change', this.updateTouch().bind(this));
|
|
42
|
+
}
|
|
43
|
+
updated(changedProperties) {
|
|
44
|
+
var _a;
|
|
45
|
+
(_a = super.updated) === null || _a === void 0 ? void 0 : _a.call(this, changedProperties);
|
|
46
|
+
console.log(`${this.media} was updated`);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
__decorate([
|
|
50
|
+
property({ type: String })
|
|
51
|
+
], MediaQueryClass.prototype, "media", void 0);
|
|
52
|
+
__decorate([
|
|
53
|
+
property({ type: Boolean })
|
|
54
|
+
], MediaQueryClass.prototype, "touch", void 0);
|
|
55
|
+
return MediaQueryClass;
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=media-queries.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
:host {
|
|
4
|
+
--_exm-navigation-drawer-shape: var(--exm-navigation-drawer-shape, 1rem);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.navigation-container {
|
|
8
|
+
display: grid;
|
|
9
|
+
grid-template-columns: auto var(--exm-navigation-submenu-column-width, 500px) 1fr;
|
|
10
|
+
grid-template-rows: 1fr;
|
|
11
|
+
width: 100%;
|
|
12
|
+
transition: grid-template-columns 0.3s ease;
|
|
13
|
+
max-height: 100vh;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.navigation-container.show-topbar {
|
|
17
|
+
grid-template-columns: 1fr;
|
|
18
|
+
grid-template-rows: auto 1fr;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.navigation-container.show-topbar exm-navigation-topbar {
|
|
22
|
+
grid-area: 1/1/2/2;
|
|
23
|
+
z-index: 2;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.navigation-container.show-topbar exm-navigation-drawer {
|
|
27
|
+
grid-area: 1/1/3/2;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.navigation-container.show-topbar .content {
|
|
31
|
+
grid-area: 2/1/3/2;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
exm-navigation-rail {
|
|
35
|
+
grid-area: 1/1/2/2;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
exm-navigation-drawer {
|
|
39
|
+
grid-area: 1/2/2/3;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.content {
|
|
43
|
+
grid-area: 1/3/2/4;
|
|
44
|
+
z-index: 1;
|
|
45
|
+
overflow: auto;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
exm-navigation-drawer {
|
|
49
|
+
--md-list-container-color: none;
|
|
50
|
+
--md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);
|
|
51
|
+
--md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
|
|
52
|
+
--md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
|
|
53
|
+
--md-list-item-container-shape: 24px;
|
|
54
|
+
--mdc-theme-surface: var(--md-sys-color-surface-container-high);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.left-margin {
|
|
58
|
+
margin-left: 2.5rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.drawer-menu-button {
|
|
62
|
+
padding: 0 8px;
|
|
63
|
+
height: var(--_exm-navigation-top-bar-height, 64px);
|
|
64
|
+
box-sizing: border-box;
|
|
65
|
+
display: grid;
|
|
66
|
+
grid-template-columns: 48px 1fr;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-items: center;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.drawer-back-button {
|
|
72
|
+
padding: 0 8px;
|
|
73
|
+
}
|
|
74
|
+
`;
|
|
75
|
+
//# sourceMappingURL=exm-navigation-css.js.map
|
package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-css.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-css.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
:host {
|
|
4
|
+
--md-sys-color-background: var(--md-sys-color-surface-container-high);
|
|
5
|
+
--_exm-navigation-submenu-width: var(--exm-navigation-submenu-width);
|
|
6
|
+
display: grid;
|
|
7
|
+
grid-template-columns: var(--_exm-navigation-submenu-width, 300px) 1fr;
|
|
8
|
+
height: 100vh;
|
|
9
|
+
width: 100%;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
transition: grid-template-columns 0.3s ease;
|
|
12
|
+
position: relative;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
aside {
|
|
16
|
+
position: absolute;
|
|
17
|
+
left: calc(-1 * var(--_exm-navigation-submenu-width, 300px) - 1px);
|
|
18
|
+
width: var(--_exm-navigation-submenu-width, 300px);
|
|
19
|
+
height: 100%;
|
|
20
|
+
transition: left 0.3s ease-out;
|
|
21
|
+
z-index: 4;
|
|
22
|
+
background-color: var(--exm-drawer-container-color, var(--md-sys-color-surface-container, #f3edf7));
|
|
23
|
+
color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface, #f3edf7));
|
|
24
|
+
border-radius: 0 var(--_exm-navigation-drawer-shape, 0) var(--_exm-navigation-drawer-shape, 0) 0;
|
|
25
|
+
border-left: 1px solid var(--md-sys-color-outline-variant);
|
|
26
|
+
|
|
27
|
+
&.open {
|
|
28
|
+
left: 0;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
`;
|
|
32
|
+
//# sourceMappingURL=exm-navigation-drawer-css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
:host {
|
|
4
|
+
--_exm-navigation-item-background-color-selected: var(
|
|
5
|
+
--exm-navigation-item-background-color-selected,
|
|
6
|
+
var(--md-sys-color-secondary)
|
|
7
|
+
);
|
|
8
|
+
--_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
|
|
9
|
+
--_exm-navigation-item-color-sub-selected: var(
|
|
10
|
+
--exm-navigation-item-color-sub-selected,
|
|
11
|
+
var(--md-sys-color-on-surface)
|
|
12
|
+
);
|
|
13
|
+
--_exm-navigation-item-background-color-sub-selected: var(
|
|
14
|
+
--exm-navigation-item-background-color-sub-selected,
|
|
15
|
+
var(--md-sys-color-surface-container-highest)
|
|
16
|
+
);
|
|
17
|
+
--md-list-item-container-shape: 2rem;
|
|
18
|
+
--md-list-item-one-line-container-height: 48px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
button {
|
|
22
|
+
--background-color: transparent;
|
|
23
|
+
--text-color: var(--md-list-item-label-text-color);
|
|
24
|
+
|
|
25
|
+
border-radius: var(--md-list-item-container-shape);
|
|
26
|
+
height: var(--md-list-item-one-line-container-height);
|
|
27
|
+
font-size: 16px;
|
|
28
|
+
padding: 0 16px;
|
|
29
|
+
display: grid;
|
|
30
|
+
align-items: center;
|
|
31
|
+
width: 100%;
|
|
32
|
+
grid-template-columns: auto 1fr auto;
|
|
33
|
+
background-color: var(--background-color);
|
|
34
|
+
position: relative;
|
|
35
|
+
border: none;
|
|
36
|
+
color: var(--md-sys-color-on-surface, black);
|
|
37
|
+
outline: none;
|
|
38
|
+
|
|
39
|
+
.label {
|
|
40
|
+
grid-area: 1/2/2/3;
|
|
41
|
+
text-align: start;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&.selected {
|
|
45
|
+
--background-color: var(--_exm-navigation-item-background-color-selected);
|
|
46
|
+
--text-color: var(--_exm-navigation-item-color-selected);
|
|
47
|
+
color: var(--text-color, black);
|
|
48
|
+
|
|
49
|
+
&.has-sub-menu {
|
|
50
|
+
--background-color: var(--_exm-navigation-item-background-color-sub-selected);
|
|
51
|
+
--text-color: var(--_exm-navigation-item-color-sub-selected);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&.has-icon {
|
|
56
|
+
padding-left: 4px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&.has-sub-menu {
|
|
60
|
+
padding-right: 4px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
& + button {
|
|
64
|
+
margin-top: 4px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
md-focus-ring {
|
|
68
|
+
color: white;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
exm-navigation-icon {
|
|
72
|
+
width: 48px;
|
|
73
|
+
|
|
74
|
+
&.item-icon {
|
|
75
|
+
grid-area: 1/1/2/2;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&.has-submenu {
|
|
79
|
+
grid-area: 1/3/2/4;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
`;
|
|
84
|
+
//# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
.icon-button {
|
|
4
|
+
display: inline-grid;
|
|
5
|
+
grid-template-columns: 48px;
|
|
6
|
+
border: none;
|
|
7
|
+
background-color: rgba(0, 0, 0, 0);
|
|
8
|
+
height: 48px;
|
|
9
|
+
align-items: center;
|
|
10
|
+
justify-content: start;
|
|
11
|
+
padding: 0;
|
|
12
|
+
color: var(--md-sys-color-on-surface, black);
|
|
13
|
+
position: relative;
|
|
14
|
+
border-radius: 2rem;
|
|
15
|
+
outline: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.icon-button.has-label {
|
|
19
|
+
grid-template-columns: 48px auto;
|
|
20
|
+
width: 100%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.icon-button .label {
|
|
24
|
+
padding: 0 8px;
|
|
25
|
+
white-space: nowrap;
|
|
26
|
+
font-size: 16px;
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
29
|
+
//# sourceMappingURL=exm-navigation-icon-button-css.js.map
|
package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-css.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-css.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
.icon {
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
display: flex;
|
|
7
|
+
position: relative;
|
|
8
|
+
height: 100%;
|
|
9
|
+
width: 100%;
|
|
10
|
+
font-variation-settings:
|
|
11
|
+
'wght' 400,
|
|
12
|
+
'opsz' 24;
|
|
13
|
+
transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
14
|
+
border-radius: 16px;
|
|
15
|
+
font-family: 'Material Symbols Outlined';
|
|
16
|
+
font-size: 24px;
|
|
17
|
+
line-height: 1;
|
|
18
|
+
direction: ltr;
|
|
19
|
+
-webkit-font-smoothing: antialiased;
|
|
20
|
+
}
|
|
21
|
+
`;
|
|
22
|
+
//# sourceMappingURL=exm-navigation-icon-css.js.map
|
package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-css.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|