@exmg/exm-navigation 1.1.4 → 1.1.6-alpha.12
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/{src → dist}/exm-navigation-base.d.ts +2 -0
- package/{src → dist}/exm-navigation-base.js +13 -8
- package/{src → dist}/exm-navigation-drawer-base.d.ts +1 -4
- package/{src → dist}/exm-navigation-drawer-base.js +9 -8
- package/{src → dist}/exm-navigation-drawer-nav-item-base.js +12 -8
- package/{src → dist}/exm-navigation-icon-button-base.js +2 -0
- package/{src → dist}/exm-navigation-sub-menu-base.d.ts +5 -0
- package/{src → dist}/exm-navigation-sub-menu-base.js +15 -4
- package/dist/index.d.ts +12 -0
- package/dist/index.js +13 -0
- package/{src → dist}/styles/exm-navigation-css.js +5 -3
- package/dist/styles/exm-navigation-drawer-css.js +35 -0
- package/dist/styles/exm-navigation-drawer-nav-item-css.js +84 -0
- package/{src → dist}/styles/exm-navigation-icon-button-css.js +6 -2
- package/{src → dist}/styles/exm-navigation-rail-css.js +1 -0
- package/dist/styles/exm-navigation-sub-menu-css.js +21 -0
- package/package.json +18 -21
- package/index.d.ts +0 -12
- package/index.js +0 -13
- package/src/styles/exm-navigation-drawer-css.js +0 -24
- package/src/styles/exm-navigation-drawer-nav-item-css.js +0 -55
- package/src/styles/exm-navigation-sub-menu-css.js +0 -53
- /package/{src → dist}/exm-navigation-drawer-menu-base.d.ts +0 -0
- /package/{src → dist}/exm-navigation-drawer-menu-base.js +0 -0
- /package/{src → dist}/exm-navigation-drawer-menu.d.ts +0 -0
- /package/{src → dist}/exm-navigation-drawer-menu.js +0 -0
- /package/{src → dist}/exm-navigation-drawer-nav-item-base.d.ts +0 -0
- /package/{src → dist}/exm-navigation-drawer-nav-item.d.ts +0 -0
- /package/{src → dist}/exm-navigation-drawer-nav-item.js +0 -0
- /package/{src → dist}/exm-navigation-drawer.d.ts +0 -0
- /package/{src → dist}/exm-navigation-drawer.js +0 -0
- /package/{src → dist}/exm-navigation-icon-base.d.ts +0 -0
- /package/{src → dist}/exm-navigation-icon-base.js +0 -0
- /package/{src → dist}/exm-navigation-icon-button-base.d.ts +0 -0
- /package/{src → dist}/exm-navigation-icon-button.d.ts +0 -0
- /package/{src → dist}/exm-navigation-icon-button.js +0 -0
- /package/{src → dist}/exm-navigation-icon.d.ts +0 -0
- /package/{src → dist}/exm-navigation-icon.js +0 -0
- /package/{src → dist}/exm-navigation-rail-base.d.ts +0 -0
- /package/{src → dist}/exm-navigation-rail-base.js +0 -0
- /package/{src → dist}/exm-navigation-rail-nav-item-base.d.ts +0 -0
- /package/{src → dist}/exm-navigation-rail-nav-item-base.js +0 -0
- /package/{src → dist}/exm-navigation-rail-nav-item.d.ts +0 -0
- /package/{src → dist}/exm-navigation-rail-nav-item.js +0 -0
- /package/{src → dist}/exm-navigation-rail.d.ts +0 -0
- /package/{src → dist}/exm-navigation-rail.js +0 -0
- /package/{src → dist}/exm-navigation-sub-menu.d.ts +0 -0
- /package/{src → dist}/exm-navigation-sub-menu.js +0 -0
- /package/{src → dist}/exm-navigation-topbar-base.d.ts +0 -0
- /package/{src → dist}/exm-navigation-topbar-base.js +0 -0
- /package/{src → dist}/exm-navigation-topbar.d.ts +0 -0
- /package/{src → dist}/exm-navigation-topbar.js +0 -0
- /package/{src → dist}/exm-navigation.d.ts +0 -0
- /package/{src → dist}/exm-navigation.js +0 -0
- /package/{src → dist}/mixins/media-queries.d.ts +0 -0
- /package/{src → dist}/mixins/media-queries.js +0 -0
- /package/{src → dist}/styles/exm-navigation-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-drawer-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-drawer-nav-item-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-icon-button-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-icon-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-icon-css.js +0 -0
- /package/{src → dist}/styles/exm-navigation-rail-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-rail-nav-item-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-rail-nav-item-css.js +0 -0
- /package/{src → dist}/styles/exm-navigation-sub-menu-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-topbar-css.d.ts +0 -0
- /package/{src → dist}/styles/exm-navigation-topbar-css.js +0 -0
- /package/{src → dist}/types.d.ts +0 -0
- /package/{src → dist}/types.js +0 -0
|
@@ -2,6 +2,8 @@ import { PropertyValues } from 'lit';
|
|
|
2
2
|
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
3
3
|
import { MenuItem } from './types.js';
|
|
4
4
|
import { ExmNavigationDrawer } from './exm-navigation-drawer.js';
|
|
5
|
+
import '@material/web/icon/icon.js';
|
|
6
|
+
import '@material/web/iconbutton/icon-button.js';
|
|
5
7
|
import './exm-navigation-icon-button.js';
|
|
6
8
|
import './exm-navigation-topbar.js';
|
|
7
9
|
import './exm-navigation-rail.js';
|
|
@@ -6,6 +6,8 @@ import { styleMap } from 'lit/directives/style-map.js';
|
|
|
6
6
|
import { MediaQueries } from './mixins/media-queries.js';
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
8
|
import { style } from './styles/exm-navigation-css.js';
|
|
9
|
+
import '@material/web/icon/icon.js';
|
|
10
|
+
import '@material/web/iconbutton/icon-button.js';
|
|
9
11
|
import './exm-navigation-icon-button.js';
|
|
10
12
|
import './exm-navigation-topbar.js';
|
|
11
13
|
import './exm-navigation-rail.js';
|
|
@@ -107,9 +109,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
|
|
|
107
109
|
* @param param0
|
|
108
110
|
*/
|
|
109
111
|
handleDrawerOpen({ mobileForce, tabletForce } = {}) {
|
|
110
|
-
if (this.media === 'mobile') {
|
|
112
|
+
if (this.media === 'mobile' || this.touch) {
|
|
111
113
|
// Only triggerable by button
|
|
112
|
-
if (mobileForce) {
|
|
114
|
+
if (mobileForce || !this.navigationHasSubmenu[this.activeItem[0]]) {
|
|
113
115
|
this.drawerOpen = false;
|
|
114
116
|
}
|
|
115
117
|
}
|
|
@@ -137,9 +139,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
|
|
|
137
139
|
*/
|
|
138
140
|
handleRailItemClick({ detail }) {
|
|
139
141
|
var _a;
|
|
140
|
-
if (this.activeItem[0] !== detail || this.media
|
|
142
|
+
if (this.activeItem[0] !== detail || this.media !== 'desktop') {
|
|
141
143
|
const items = ((_a = this.items.find((item) => item.id === detail)) === null || _a === void 0 ? void 0 : _a.items) || [];
|
|
142
|
-
if (items.length) {
|
|
144
|
+
if (items.length && !this.touch) {
|
|
143
145
|
this.selectedItem = [detail, items[0].id];
|
|
144
146
|
}
|
|
145
147
|
else {
|
|
@@ -153,6 +155,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
|
|
|
153
155
|
* Handle the mouse enter of the rail item.
|
|
154
156
|
*/
|
|
155
157
|
handleRailItemMouseEnter({ detail }) {
|
|
158
|
+
if (this.touch) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
156
161
|
this.selectedItem = [detail];
|
|
157
162
|
this.handleDrawerOpen();
|
|
158
163
|
}
|
|
@@ -185,7 +190,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
|
|
|
185
190
|
this.loadPage(this.selectedItem);
|
|
186
191
|
mobileForce = true;
|
|
187
192
|
}
|
|
188
|
-
this.handleDrawerOpen({ mobileForce, tabletForce: this.touch });
|
|
193
|
+
this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint });
|
|
189
194
|
}
|
|
190
195
|
/**
|
|
191
196
|
* Handle the topbar menu click.
|
|
@@ -221,9 +226,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
|
|
|
221
226
|
return !this.railOpen
|
|
222
227
|
? html `
|
|
223
228
|
<section class="drawer-menu-button">
|
|
224
|
-
<md-icon-button @click=${this.handleTopbarMenuClick}
|
|
225
|
-
|
|
226
|
-
>
|
|
229
|
+
<md-icon-button @click=${this.handleTopbarMenuClick}>
|
|
230
|
+
<md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon>
|
|
231
|
+
</md-icon-button>
|
|
227
232
|
</section>
|
|
228
233
|
`
|
|
229
234
|
: nothing;
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import { Drawer } from '@material/mwc-drawer';
|
|
2
1
|
import { ExmgElement } from '@exmg/lit-base';
|
|
3
|
-
import '@material/mwc-drawer';
|
|
4
2
|
export declare class ExmNavigationDrawerBase extends ExmgElement {
|
|
5
3
|
open: boolean;
|
|
6
4
|
persistent: boolean;
|
|
7
|
-
drawer?:
|
|
5
|
+
drawer?: HTMLDivElement;
|
|
8
6
|
static styles: import("lit").CSSResult[];
|
|
9
7
|
private handleMouseEnter;
|
|
10
8
|
private handleMouseLeave;
|
|
11
|
-
private handleDrawerClose;
|
|
12
9
|
protected firstUpdated(): Promise<void>;
|
|
13
10
|
render(): import("lit-html").TemplateResult<1>;
|
|
14
11
|
}
|
|
@@ -3,7 +3,7 @@ import { html } from 'lit';
|
|
|
3
3
|
import { property, query } from 'lit/decorators.js';
|
|
4
4
|
import { ExmgElement } from '@exmg/lit-base';
|
|
5
5
|
import { style } from './styles/exm-navigation-drawer-css.js';
|
|
6
|
-
import '
|
|
6
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
7
7
|
export class ExmNavigationDrawerBase extends ExmgElement {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments);
|
|
@@ -16,9 +16,6 @@ export class ExmNavigationDrawerBase extends ExmgElement {
|
|
|
16
16
|
handleMouseLeave() {
|
|
17
17
|
this.fire('drawer-mouseleave');
|
|
18
18
|
}
|
|
19
|
-
handleDrawerClose() {
|
|
20
|
-
this.fire('drawer-mouseleave');
|
|
21
|
-
}
|
|
22
19
|
async firstUpdated() {
|
|
23
20
|
var _a;
|
|
24
21
|
await this.updateComplete;
|
|
@@ -30,12 +27,16 @@ export class ExmNavigationDrawerBase extends ExmgElement {
|
|
|
30
27
|
asideElement.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
|
|
31
28
|
}
|
|
32
29
|
}
|
|
33
|
-
this.addEventListener('drawer-close', this.handleDrawerClose.bind(this));
|
|
34
30
|
}
|
|
35
31
|
render() {
|
|
36
|
-
|
|
32
|
+
const classNames = { open: this.open };
|
|
33
|
+
return html `<aside
|
|
34
|
+
class="${classMap(classNames)}"
|
|
35
|
+
@mouseenter=${this.handleMouseEnter}
|
|
36
|
+
@mouseleave=${this.handleMouseLeave}
|
|
37
|
+
>
|
|
37
38
|
<slot></slot>
|
|
38
|
-
</
|
|
39
|
+
</aside> `;
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
ExmNavigationDrawerBase.styles = [style];
|
|
@@ -46,6 +47,6 @@ __decorate([
|
|
|
46
47
|
property({ type: Boolean })
|
|
47
48
|
], ExmNavigationDrawerBase.prototype, "persistent", void 0);
|
|
48
49
|
__decorate([
|
|
49
|
-
query('
|
|
50
|
+
query('aside')
|
|
50
51
|
], ExmNavigationDrawerBase.prototype, "drawer", void 0);
|
|
51
52
|
//# sourceMappingURL=exm-navigation-drawer-base.js.map
|
|
@@ -6,6 +6,7 @@ import '@material/web/focus/md-focus-ring.js';
|
|
|
6
6
|
import './exm-navigation-icon.js';
|
|
7
7
|
import '@material/web/list/list.js';
|
|
8
8
|
import '@material/web/list/list-item.js';
|
|
9
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
9
10
|
export class ExmNavigationDrawerNavItemBase extends LitElement {
|
|
10
11
|
constructor() {
|
|
11
12
|
super(...arguments);
|
|
@@ -15,15 +16,18 @@ export class ExmNavigationDrawerNavItemBase extends LitElement {
|
|
|
15
16
|
this.submenuIcon = 'arrow_forward';
|
|
16
17
|
}
|
|
17
18
|
render() {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
const classList = { selected: this.selected, 'has-sub-menu': this.hasSubmenu, 'has-icon': !!this.icon };
|
|
20
|
+
return html `
|
|
21
|
+
<button class="${classMap(classList)}">
|
|
22
|
+
${this.icon ? html `<exm-navigation-icon class="item-icon" icon=${this.icon}></exm-navigation-icon>` : nothing}
|
|
23
|
+
<span class="label"><slot></slot></span>
|
|
24
|
+
${this.hasSubmenu
|
|
25
|
+
? html `<exm-navigation-icon class="has-submenu" icon=${this.submenuIcon}></exm-navigation-icon>`
|
|
21
26
|
: nothing}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
</md-list-item>`;
|
|
27
|
+
<md-ripple part="ripple"></md-ripple>
|
|
28
|
+
<md-focus-ring part="focus-ring" inward></md-focus-ring>
|
|
29
|
+
</button>
|
|
30
|
+
`;
|
|
27
31
|
}
|
|
28
32
|
}
|
|
29
33
|
ExmNavigationDrawerNavItemBase.styles = [style];
|
|
@@ -20,6 +20,8 @@ export class ExmNavigationIconButtonBase extends ExmgElement {
|
|
|
20
20
|
<button class="icon-button ${classMap(buttonClass)}" @click=${this.handleMenuButtonClick}>
|
|
21
21
|
<exm-navigation-icon icon=${this.icon}></exm-navigation-icon>
|
|
22
22
|
${this.label ? html ` <span class="label">${this.label}</span>` : nothing}
|
|
23
|
+
<md-ripple part="ripple"></md-ripple>
|
|
24
|
+
<md-focus-ring part="focus-ring" inward></md-focus-ring>
|
|
23
25
|
</button>
|
|
24
26
|
`;
|
|
25
27
|
}
|
|
@@ -17,6 +17,11 @@ export declare class ExmNavigationSubMenuBase extends ExmgElement {
|
|
|
17
17
|
connectedCallback(): void;
|
|
18
18
|
disconnectedCallback(): void;
|
|
19
19
|
private handleSubMenuItemClick;
|
|
20
|
+
/**
|
|
21
|
+
* If a collapsable menuitem is not selected we can just pass the path.
|
|
22
|
+
* If it is selected, we remove the item from the path to collapse the menu again
|
|
23
|
+
*/
|
|
24
|
+
private handleCollapsableSubMenuItemClick;
|
|
20
25
|
private getItemStyle;
|
|
21
26
|
private renderSubMenu;
|
|
22
27
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -26,10 +26,8 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
|
|
|
26
26
|
}
|
|
27
27
|
connectedCallback() {
|
|
28
28
|
super.connectedCallback();
|
|
29
|
-
console.log('Conected submenu');
|
|
30
29
|
}
|
|
31
30
|
disconnectedCallback() {
|
|
32
|
-
console.log('UNConected submenu');
|
|
33
31
|
if (this.navigationElement) {
|
|
34
32
|
this.navigationElement.classList.remove('show');
|
|
35
33
|
}
|
|
@@ -38,12 +36,25 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
|
|
|
38
36
|
handleSubMenuItemClick(path) {
|
|
39
37
|
this.fire('sub-menu-item-click', path);
|
|
40
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
|
+
}
|
|
41
51
|
getItemStyle() {
|
|
42
52
|
return {
|
|
43
53
|
'grid-area': `${ExmNavigationSubMenuBase.itemIndex}/1/${ExmNavigationSubMenuBase.itemIndex + 1}/2`,
|
|
44
54
|
};
|
|
45
55
|
}
|
|
46
56
|
renderSubMenu(item, path) {
|
|
57
|
+
const selected = this.path.includes(item.id);
|
|
47
58
|
return html `
|
|
48
59
|
<exm-navigation-drawer-nav-item
|
|
49
60
|
${animate({
|
|
@@ -56,9 +67,9 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
|
|
|
56
67
|
})}
|
|
57
68
|
style=${styleMap(this.getItemStyle())}
|
|
58
69
|
type="button"
|
|
59
|
-
?selected=${
|
|
70
|
+
?selected=${selected}
|
|
60
71
|
class="has-submenu ${this.path.includes(item.id) ? 'selected' : ''}"
|
|
61
|
-
@click=${this.
|
|
72
|
+
@click=${this.handleCollapsableSubMenuItemClick.bind(this, [...path], item.id, selected)}
|
|
62
73
|
?has-submenu=${true}
|
|
63
74
|
submenu-icon=${this.path.includes(item.id) ? 'expand_less' : 'expand_more'}
|
|
64
75
|
>${item.label}
|
package/dist/index.d.ts
ADDED
|
@@ -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';
|
package/dist/index.js
ADDED
|
@@ -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
|
|
@@ -56,15 +56,17 @@ export const style = css `
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.drawer-menu-button {
|
|
59
|
-
padding: 8px
|
|
59
|
+
padding: 0 8px;
|
|
60
60
|
height: var(--_exm-navigation-top-bar-height, 64px);
|
|
61
61
|
box-sizing: border-box;
|
|
62
|
-
display:
|
|
62
|
+
display: grid;
|
|
63
|
+
grid-template-columns: 48px 1fr;
|
|
63
64
|
align-items: center;
|
|
65
|
+
justify-items: center;
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
.drawer-back-button {
|
|
67
|
-
padding: 8px
|
|
69
|
+
padding: 0 8px;
|
|
68
70
|
}
|
|
69
71
|
`;
|
|
70
72
|
//# sourceMappingURL=exm-navigation-css.js.map
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
:root {
|
|
4
|
+
--md-sys-color-background: var(--md-sys-color-surface-container-high);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:host {
|
|
8
|
+
--exm-drawer-max-width: 319px;
|
|
9
|
+
display: grid;
|
|
10
|
+
grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
|
|
11
|
+
height: 100vh;
|
|
12
|
+
width: 100%;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
transition: grid-template-columns 0.3s ease;
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
aside {
|
|
19
|
+
position: absolute;
|
|
20
|
+
left: -300px;
|
|
21
|
+
width: var(--exm-drawer-max-width, 300px);
|
|
22
|
+
height: 100%;
|
|
23
|
+
transition: left 0.3s ease-out;
|
|
24
|
+
z-index: 4;
|
|
25
|
+
background-color: var(--exm-drawer-container-color, var(--md-sys-color-surface-container, #f3edf7));
|
|
26
|
+
color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface-container, #f3edf7));
|
|
27
|
+
border-radius: 0 var(--mdc-shape-large, 0) var(--mdc-shape-large, 0) 0;
|
|
28
|
+
border-left: 1px solid var(--md-sys-color-outline);
|
|
29
|
+
|
|
30
|
+
&.open {
|
|
31
|
+
left: 0;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
`;
|
|
35
|
+
//# sourceMappingURL=exm-navigation-drawer-css.js.map
|
|
@@ -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
|
|
@@ -5,15 +5,19 @@ export const style = css `
|
|
|
5
5
|
grid-template-columns: 48px;
|
|
6
6
|
border: none;
|
|
7
7
|
background-color: rgba(0, 0, 0, 0);
|
|
8
|
-
color: #fff;
|
|
9
8
|
height: 48px;
|
|
10
9
|
align-items: center;
|
|
11
|
-
justify-content:
|
|
10
|
+
justify-content: start;
|
|
12
11
|
padding: 0;
|
|
12
|
+
color: var(--md-sys-color-on-surface, black);
|
|
13
|
+
position: relative;
|
|
14
|
+
border-radius: 2rem;
|
|
15
|
+
outline: none;
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
.icon-button.has-label {
|
|
16
19
|
grid-template-columns: 48px auto;
|
|
20
|
+
width: 100%;
|
|
17
21
|
}
|
|
18
22
|
|
|
19
23
|
.icon-button .label {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
.nav {
|
|
4
|
+
padding: 8px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
md-list {
|
|
8
|
+
padding-top: 0;
|
|
9
|
+
display: grid;
|
|
10
|
+
grid-template-rows: repeat(auto-fit, auto);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.has-back-button {
|
|
14
|
+
padding-left: 48px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.sub-menu {
|
|
18
|
+
margin-left: 1rem;
|
|
19
|
+
}
|
|
20
|
+
`;
|
|
21
|
+
//# sourceMappingURL=exm-navigation-sub-menu-css.js.map
|
package/package.json
CHANGED
|
@@ -1,26 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@exmg/exm-navigation",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.6-alpha.12+33e1367",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"module": "index.js",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
7
|
"exports": {
|
|
8
|
-
".": "./index.js",
|
|
9
|
-
"./exm-navigation.js": "./
|
|
10
|
-
"./exm-navigation-drawer.js": "./
|
|
11
|
-
"./exm-navigation-drawer-menu.js": "./
|
|
12
|
-
"./exm-navigation-drawer-nav-item.js": "./
|
|
13
|
-
"./exm-navigation-icon.js": "./
|
|
14
|
-
"./exm-navigation-icon-button.js": "./
|
|
15
|
-
"./exm-navigation-rail.js": "./
|
|
16
|
-
"./exm-navigation-rail-nav-item.js": "./
|
|
17
|
-
"./exm-navigation-topbar.js": "./
|
|
18
|
-
"./exm-navigation-base.js": "./
|
|
8
|
+
".": "./dist/index.js",
|
|
9
|
+
"./exm-navigation.js": "./dist/exm-navigation.js",
|
|
10
|
+
"./exm-navigation-drawer.js": "./dist/exm-navigation-drawer.js",
|
|
11
|
+
"./exm-navigation-drawer-menu.js": "./dist/exm-navigation-drawer-menu.js",
|
|
12
|
+
"./exm-navigation-drawer-nav-item.js": "./dist/exm-navigation-drawer-nav-item.js",
|
|
13
|
+
"./exm-navigation-icon.js": "./dist/exm-navigation-icon.js",
|
|
14
|
+
"./exm-navigation-icon-button.js": "./dist/exm-navigation-icon-button.js",
|
|
15
|
+
"./exm-navigation-rail.js": "./dist/exm-navigation-rail.js",
|
|
16
|
+
"./exm-navigation-rail-nav-item.js": "./dist/exm-navigation-rail-nav-item.js",
|
|
17
|
+
"./exm-navigation-topbar.js": "./dist/exm-navigation-topbar.js",
|
|
18
|
+
"./exm-navigation-base.js": "./dist/ExmNavigationBase.js"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@exmg/lit-base": "^3.0.0",
|
|
22
22
|
"@lit-labs/motion": "^1.0.7",
|
|
23
|
-
"@material/mwc-drawer": "^0.27.0",
|
|
24
23
|
"@material/mwc-top-app-bar-fixed": "^0.27.0",
|
|
25
24
|
"@material/web": "^2.2.0",
|
|
26
25
|
"lit": "^3.0.0",
|
|
@@ -39,18 +38,16 @@
|
|
|
39
38
|
"**/*.js",
|
|
40
39
|
"**/*.d.ts"
|
|
41
40
|
],
|
|
42
|
-
"homepage": "https://
|
|
41
|
+
"homepage": "https://bitbucket.org/exmachina/exm-web-components",
|
|
43
42
|
"repository": {
|
|
44
43
|
"type": "git",
|
|
45
|
-
"url": "git@
|
|
44
|
+
"url": "git@bitbucket.org:exmachina/exm-web-components.git",
|
|
46
45
|
"directory": "packages/exm-navigation"
|
|
47
46
|
},
|
|
48
47
|
"license": "MIT",
|
|
49
|
-
"scripts": {
|
|
50
|
-
"build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
|
|
51
|
-
},
|
|
48
|
+
"scripts": {},
|
|
52
49
|
"publishConfig": {
|
|
53
50
|
"access": "public"
|
|
54
51
|
},
|
|
55
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "33e1367329dfae6f98f21c981edb7ada370fc0d5"
|
|
56
53
|
}
|
package/index.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export { ExmNavigation } from './src/exm-navigation.js';
|
|
2
|
-
export { ExmNavigationBase } from './src/exm-navigation-base.js';
|
|
3
|
-
export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
|
|
4
|
-
export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
|
|
5
|
-
export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
|
|
6
|
-
export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
|
|
7
|
-
export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
|
|
8
|
-
export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
|
|
9
|
-
export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
|
|
10
|
-
export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
|
|
11
|
-
export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
|
|
12
|
-
export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';
|
package/index.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export { ExmNavigation } from './src/exm-navigation.js';
|
|
2
|
-
export { ExmNavigationBase } from './src/exm-navigation-base.js';
|
|
3
|
-
export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
|
|
4
|
-
export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
|
|
5
|
-
export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
|
|
6
|
-
export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
|
|
7
|
-
export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
|
|
8
|
-
export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
|
|
9
|
-
export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
|
|
10
|
-
export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
|
|
11
|
-
export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
|
|
12
|
-
export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';
|
|
13
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const style = css `
|
|
3
|
-
:root {
|
|
4
|
-
--md-sys-color-background: var(--md-sys-color-surface-container-high);
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
:host {
|
|
8
|
-
--mdc-drawer-width: 319px;
|
|
9
|
-
display: grid;
|
|
10
|
-
grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
|
|
11
|
-
height: 100vh;
|
|
12
|
-
width: 100%;
|
|
13
|
-
box-sizing: border-box;
|
|
14
|
-
transition: grid-template-columns 0.3s ease;
|
|
15
|
-
position: relative;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@media screen and (min-width: 961px) {
|
|
19
|
-
slot[name='appContent'] {
|
|
20
|
-
background-color: rgba(0, 0, 0, 0);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
`;
|
|
24
|
-
//# sourceMappingURL=exm-navigation-drawer-css.js.map
|
|
@@ -1,55 +0,0 @@
|
|
|
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
|
-
}
|
|
18
|
-
|
|
19
|
-
md-list-item {
|
|
20
|
-
margin-right: 8px;
|
|
21
|
-
margin-left: 8px;
|
|
22
|
-
border-radius: 2rem;
|
|
23
|
-
--md-list-item-container-shape: 2rem;
|
|
24
|
-
--md-list-item-one-line-container-height: 48px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
md-list-item[selected] {
|
|
28
|
-
--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
|
|
29
|
-
background-color: var(--_exm-navigation-item-background-color-selected);
|
|
30
|
-
--md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected)
|
|
31
|
-
--md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
|
|
32
|
-
--md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected)
|
|
33
|
-
--md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
:host(.has-submenu) {
|
|
37
|
-
md-list-item[selected] {
|
|
38
|
-
background-color: var(--_exm-navigation-item-background-color-sub-selected);
|
|
39
|
-
--md-list-item-label-text-color: var(--_exm-navigation-item-color-sub-selected);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
md-list-item.collapsed-item[selected] {
|
|
43
|
-
--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
|
|
44
|
-
background-color: var(--_exm-navigation-item-background-color-selected);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
md-list-item[selected] md-icon {
|
|
48
|
-
color: var(--md-sys-color-primary);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.sub-menu {
|
|
52
|
-
margin-left: 1rem;
|
|
53
|
-
}
|
|
54
|
-
`;
|
|
55
|
-
//# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map
|
|
@@ -1,53 +0,0 @@
|
|
|
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
|
-
}
|
|
10
|
-
|
|
11
|
-
.nav {
|
|
12
|
-
padding-top: 4px;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
md-list {
|
|
16
|
-
padding-top: 0;
|
|
17
|
-
display: grid;
|
|
18
|
-
grid-template-rows: repeat(auto-fit, auto);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
md-list-item {
|
|
22
|
-
margin-right: 8px;
|
|
23
|
-
margin-left: 8px;
|
|
24
|
-
border-radius: 2rem;
|
|
25
|
-
--md-list-item-container-shape: 2rem;
|
|
26
|
-
--md-list-item-one-line-container-height: 48px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
md-list-item[selected] {
|
|
30
|
-
--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
|
|
31
|
-
background-color: var(--_exm-navigation-item-background-color-selected);
|
|
32
|
-
--md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected);
|
|
33
|
-
--md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
md-list-item.collapsed-item[selected] {
|
|
37
|
-
--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
|
|
38
|
-
background-color: var(--_exm-navigation-item-background-color-selected);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
md-list-item[selected] md-icon {
|
|
42
|
-
color: var(--md-sys-color-primary);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.has-back-button {
|
|
46
|
-
padding-left: 44px;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.sub-menu {
|
|
50
|
-
margin-left: 1rem;
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
|
-
//# sourceMappingURL=exm-navigation-sub-menu-css.js.map
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/{src → dist}/types.d.ts
RENAMED
|
File without changes
|
/package/{src → dist}/types.js
RENAMED
|
File without changes
|