@exmg/exm-navigation 1.0.3 → 1.1.1-alpha.9
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 +73 -0
- package/dist/exm-navigation-base.d.ts +131 -0
- package/dist/exm-navigation-base.js +391 -0
- package/dist/exm-navigation-drawer-base.d.ts +11 -0
- package/dist/exm-navigation-drawer-base.js +52 -0
- package/dist/exm-navigation-drawer-menu-base.d.ts +12 -0
- package/dist/exm-navigation-drawer-menu-base.js +45 -0
- package/dist/exm-navigation-drawer-menu.d.ts +9 -0
- package/dist/exm-navigation-drawer-menu.js +12 -0
- package/dist/exm-navigation-drawer-nav-item-base.d.ts +14 -0
- package/dist/exm-navigation-drawer-nav-item-base.js +49 -0
- package/dist/exm-navigation-drawer-nav-item.d.ts +8 -0
- package/dist/exm-navigation-drawer-nav-item.js +10 -0
- package/{src → dist}/exm-navigation-drawer.d.ts +0 -1
- package/{src → dist}/exm-navigation-drawer.js +0 -2
- package/dist/exm-navigation-icon-base.d.ts +7 -0
- package/dist/exm-navigation-icon-base.js +20 -0
- package/dist/exm-navigation-icon-button-base.d.ts +9 -0
- package/dist/exm-navigation-icon-button-base.js +36 -0
- package/dist/exm-navigation-icon-button.d.ts +8 -0
- package/dist/exm-navigation-icon-button.js +10 -0
- package/dist/exm-navigation-icon.d.ts +8 -0
- package/dist/exm-navigation-icon.js +10 -0
- package/dist/exm-navigation-rail-base.d.ts +12 -0
- package/dist/exm-navigation-rail-base.js +55 -0
- package/{src → dist}/exm-navigation-rail-nav-item-base.d.ts +2 -4
- package/dist/exm-navigation-rail-nav-item-base.js +37 -0
- package/{src → dist}/exm-navigation-rail-nav-item.d.ts +0 -1
- package/{src → dist}/exm-navigation-rail-nav-item.js +0 -2
- package/{src → dist}/exm-navigation-rail.d.ts +0 -1
- package/{src → dist}/exm-navigation-rail.js +0 -2
- package/dist/exm-navigation-sub-menu-base.d.ts +28 -0
- package/dist/exm-navigation-sub-menu-base.js +153 -0
- package/dist/exm-navigation-sub-menu.d.ts +8 -0
- package/dist/exm-navigation-sub-menu.js +10 -0
- package/dist/exm-navigation-topbar-base.d.ts +10 -0
- package/dist/exm-navigation-topbar-base.js +33 -0
- package/dist/exm-navigation-topbar.d.ts +8 -0
- package/dist/exm-navigation-topbar.js +10 -0
- package/dist/exm-navigation.d.ts +8 -0
- package/dist/exm-navigation.js +10 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +13 -0
- package/dist/mixins/media-queries.d.ts +8 -0
- package/dist/mixins/media-queries.js +57 -0
- package/{src/styles/exm-navigation-rail-nav-css.d.ts → dist/styles/exm-navigation-css.d.ts} +0 -1
- package/dist/styles/exm-navigation-css.js +72 -0
- package/{src → dist}/styles/exm-navigation-drawer-css.d.ts +0 -1
- package/dist/styles/exm-navigation-drawer-css.js +35 -0
- package/dist/styles/exm-navigation-drawer-nav-item-css.d.ts +1 -0
- package/dist/styles/exm-navigation-drawer-nav-item-css.js +84 -0
- package/dist/styles/exm-navigation-icon-button-css.d.ts +1 -0
- package/dist/styles/exm-navigation-icon-button-css.js +29 -0
- package/dist/styles/exm-navigation-icon-css.d.ts +1 -0
- package/dist/styles/exm-navigation-icon-css.js +22 -0
- package/{src → dist}/styles/exm-navigation-rail-css.d.ts +0 -1
- package/dist/styles/exm-navigation-rail-css.js +50 -0
- package/{src → dist}/styles/exm-navigation-rail-nav-item-css.d.ts +0 -1
- package/dist/styles/exm-navigation-rail-nav-item-css.js +94 -0
- package/dist/styles/exm-navigation-sub-menu-css.d.ts +1 -0
- package/dist/styles/exm-navigation-sub-menu-css.js +21 -0
- package/dist/styles/exm-navigation-topbar-css.d.ts +1 -0
- package/dist/styles/exm-navigation-topbar-css.js +30 -0
- package/dist/types.d.ts +8 -0
- package/dist/types.js +2 -0
- package/package.json +19 -20
- package/index.d.ts +0 -16
- package/index.js +0 -17
- package/src/exm-navigation-base.d.ts +0 -30
- package/src/exm-navigation-base.js +0 -85
- package/src/exm-navigation-drawer-base.d.ts +0 -29
- package/src/exm-navigation-drawer-base.js +0 -173
- package/src/exm-navigation-drawer-nav.d.ts +0 -9
- package/src/exm-navigation-drawer-nav.js +0 -47
- package/src/exm-navigation-rail-base.d.ts +0 -4
- package/src/exm-navigation-rail-base.js +0 -10
- package/src/exm-navigation-rail-nav-base.d.ts +0 -4
- package/src/exm-navigation-rail-nav-base.js +0 -9
- package/src/exm-navigation-rail-nav-item-base.js +0 -69
- package/src/exm-navigation-rail-nav.d.ts +0 -9
- package/src/exm-navigation-rail-nav.js +0 -12
- package/src/exm-navigation-signals.d.ts +0 -11
- package/src/exm-navigation-signals.js +0 -11
- package/src/exm-navigation-toolbar-base.d.ts +0 -8
- package/src/exm-navigation-toolbar-base.js +0 -33
- package/src/exm-navigation-toolbar.d.ts +0 -9
- package/src/exm-navigation-toolbar.js +0 -12
- package/src/styles/exm-navigation-drawer-css.js +0 -4
- package/src/styles/exm-navigation-drawer.scss +0 -29
- package/src/styles/exm-navigation-rail-css.js +0 -4
- package/src/styles/exm-navigation-rail-nav-css.js +0 -4
- package/src/styles/exm-navigation-rail-nav-item-css.js +0 -4
- package/src/styles/exm-navigation-rail-nav-item.scss +0 -107
- package/src/styles/exm-navigation-rail-nav.scss +0 -7
- package/src/styles/exm-navigation-rail.scss +0 -35
- package/src/styles/exm-navigation-styles-css.d.ts +0 -2
- package/src/styles/exm-navigation-styles-css.js +0 -4
- package/src/styles/exm-navigation-styles.scss +0 -46
- package/src/styles/exm-navigation-toolbar-css.d.ts +0 -2
- package/src/styles/exm-navigation-toolbar-css.js +0 -4
- package/src/styles/exm-navigation-toolbar.scss +0 -18
package/dist/types.d.ts
ADDED
package/dist/types.js
ADDED
package/package.json
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@exmg/exm-navigation",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1-alpha.9+837d9ca",
|
|
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
|
|
10
|
-
"./exm-navigation-
|
|
11
|
-
"./exm-navigation-
|
|
12
|
-
"./exm-navigation-drawer.js": "./
|
|
13
|
-
"./exm-navigation-
|
|
14
|
-
"./exm-navigation-
|
|
15
|
-
"./exm-navigation-
|
|
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"
|
|
16
19
|
},
|
|
17
20
|
"dependencies": {
|
|
18
21
|
"@exmg/lit-base": "^3.0.0",
|
|
19
|
-
"@lit-labs/
|
|
20
|
-
"@lit-labs/preact-signals": "^1.0.1",
|
|
21
|
-
"@material/mwc-drawer": "^0.27.0",
|
|
22
|
+
"@lit-labs/motion": "^1.0.7",
|
|
22
23
|
"@material/mwc-top-app-bar-fixed": "^0.27.0",
|
|
23
24
|
"@material/web": "^2.2.0",
|
|
24
25
|
"lit": "^3.0.0",
|
|
@@ -37,18 +38,16 @@
|
|
|
37
38
|
"**/*.js",
|
|
38
39
|
"**/*.d.ts"
|
|
39
40
|
],
|
|
40
|
-
"homepage": "https://
|
|
41
|
+
"homepage": "https://bitbucket.org/exmachina/exm-web-components",
|
|
41
42
|
"repository": {
|
|
42
43
|
"type": "git",
|
|
43
|
-
"url": "git@
|
|
44
|
+
"url": "git@bitbucket.org:exmachina/exm-web-components.git",
|
|
44
45
|
"directory": "packages/exm-navigation"
|
|
45
46
|
},
|
|
46
47
|
"license": "MIT",
|
|
47
|
-
"scripts": {
|
|
48
|
-
"build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
|
|
49
|
-
},
|
|
48
|
+
"scripts": {},
|
|
50
49
|
"publishConfig": {
|
|
51
50
|
"access": "public"
|
|
52
51
|
},
|
|
53
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "837d9ca5424b3436826a18d1d542483134448e73"
|
|
54
53
|
}
|
package/index.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export { ExmNavigationRailNavItem } from './src/exm-navigation-rail-nav-item.js';
|
|
2
|
-
export { ExmNavigationRailNav } from './src/exm-navigation-rail-nav.js';
|
|
3
|
-
export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
|
|
4
|
-
export { ExmNavigationRail } from './src/exm-navigation-rail.js';
|
|
5
|
-
export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
|
|
6
|
-
export { ExmNavigationDrawer } from './src/exm-navigation-drawer.js';
|
|
7
|
-
export { ExmNavigationToolbarBase } from './src/exm-navigation-toolbar-base.js';
|
|
8
|
-
export { ExmNavigationBase } from './src/exm-navigation-base.js';
|
|
9
|
-
export { navigationItemHover, navigationDrawerHover, navigationDrawerOpen, navigationRailSelected, navigationRailActive, navigationDrawerPersistent, navigationRailHidden, navigationActiveHasSubmenu, navigationSubSelected, } from './src/exm-navigation-signals.js';
|
|
10
|
-
export { SignalWatcher } from '@lit-labs/preact-signals';
|
|
11
|
-
export { style as exmgRailStyles } from './src/styles/exm-navigation-rail-css.js';
|
|
12
|
-
export { style as exmgRailNavStyles } from './src/styles/exm-navigation-rail-nav-css.js';
|
|
13
|
-
export { style as exmgRailNavItemStyles } from './src/styles/exm-navigation-rail-nav-item-css.js';
|
|
14
|
-
export { style as exmgDrawerStyles } from './src/styles/exm-navigation-drawer-css.js';
|
|
15
|
-
export { style as exmgToolbarStyles } from './src/styles/exm-navigation-toolbar-css.js';
|
|
16
|
-
export { style as exmgNavigationDrawerStyles } from './src/styles/exm-navigation-styles-css.js';
|
package/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export { ExmNavigationRailNavItem } from './src/exm-navigation-rail-nav-item.js';
|
|
2
|
-
export { ExmNavigationRailNav } from './src/exm-navigation-rail-nav.js';
|
|
3
|
-
export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
|
|
4
|
-
export { ExmNavigationRail } from './src/exm-navigation-rail.js';
|
|
5
|
-
export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
|
|
6
|
-
export { ExmNavigationDrawer } from './src/exm-navigation-drawer.js';
|
|
7
|
-
export { ExmNavigationToolbarBase } from './src/exm-navigation-toolbar-base.js';
|
|
8
|
-
export { ExmNavigationBase } from './src/exm-navigation-base.js';
|
|
9
|
-
export { navigationItemHover, navigationDrawerHover, navigationDrawerOpen, navigationRailSelected, navigationRailActive, navigationDrawerPersistent, navigationRailHidden, navigationActiveHasSubmenu, navigationSubSelected, } from './src/exm-navigation-signals.js';
|
|
10
|
-
export { SignalWatcher } from '@lit-labs/preact-signals';
|
|
11
|
-
export { style as exmgRailStyles } from './src/styles/exm-navigation-rail-css.js';
|
|
12
|
-
export { style as exmgRailNavStyles } from './src/styles/exm-navigation-rail-nav-css.js';
|
|
13
|
-
export { style as exmgRailNavItemStyles } from './src/styles/exm-navigation-rail-nav-item-css.js';
|
|
14
|
-
export { style as exmgDrawerStyles } from './src/styles/exm-navigation-drawer-css.js';
|
|
15
|
-
export { style as exmgToolbarStyles } from './src/styles/exm-navigation-toolbar-css.js';
|
|
16
|
-
export { style as exmgNavigationDrawerStyles } from './src/styles/exm-navigation-styles-css.js';
|
|
17
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { ExmNavigationDrawer } from './exm-navigation-drawer.js';
|
|
3
|
-
export interface MenuItem {
|
|
4
|
-
id: string;
|
|
5
|
-
label: string;
|
|
6
|
-
path?: string;
|
|
7
|
-
url?: string;
|
|
8
|
-
icon?: string;
|
|
9
|
-
items?: MenuItem[];
|
|
10
|
-
}
|
|
11
|
-
declare const ExmNavigationBase_base: typeof LitElement;
|
|
12
|
-
export declare class ExmNavigationBase extends ExmNavigationBase_base {
|
|
13
|
-
pageId: string;
|
|
14
|
-
drawer?: ExmNavigationDrawer;
|
|
15
|
-
menu: MenuItem[];
|
|
16
|
-
expandedItems: {
|
|
17
|
-
[k: string]: boolean;
|
|
18
|
-
};
|
|
19
|
-
connectedCallback(): void;
|
|
20
|
-
isSubMenuExpanded(id: string): boolean;
|
|
21
|
-
toggleExpanded(id: string): void;
|
|
22
|
-
getItemsFromParentId(id: string): MenuItem[];
|
|
23
|
-
getActiveSubmenuParent(): string | null;
|
|
24
|
-
loadPage(id: string): void;
|
|
25
|
-
handlSubMenuBackClick(): void;
|
|
26
|
-
handleNavigationSubClicked(i: MenuItem, parentId: string): void;
|
|
27
|
-
handleRailClick(id: string): void;
|
|
28
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
29
|
-
}
|
|
30
|
-
export {};
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { SignalWatcher } from '@lit-labs/preact-signals';
|
|
3
|
-
import { LitElement, html } from 'lit';
|
|
4
|
-
import { navigationDrawerHover, navigationDrawerPersistent, navigationItemHover, navigationRailActive, navigationRailSelected, navigationSubSelected, } from './exm-navigation-signals.js';
|
|
5
|
-
import { property, query } from 'lit/decorators.js';
|
|
6
|
-
// eslint-disable-next-line
|
|
7
|
-
export class ExmNavigationBase extends SignalWatcher(LitElement) {
|
|
8
|
-
constructor() {
|
|
9
|
-
super(...arguments);
|
|
10
|
-
this.pageId = 'chat';
|
|
11
|
-
this.menu = [];
|
|
12
|
-
this.expandedItems = {};
|
|
13
|
-
}
|
|
14
|
-
connectedCallback() {
|
|
15
|
-
super.connectedCallback();
|
|
16
|
-
navigationRailSelected.value = this.pageId;
|
|
17
|
-
navigationRailActive.value = this.pageId;
|
|
18
|
-
}
|
|
19
|
-
isSubMenuExpanded(id) {
|
|
20
|
-
return !!this.expandedItems[id];
|
|
21
|
-
}
|
|
22
|
-
toggleExpanded(id) {
|
|
23
|
-
const expanded = this.isSubMenuExpanded(id);
|
|
24
|
-
this.expandedItems[id] = !expanded;
|
|
25
|
-
this.requestUpdate();
|
|
26
|
-
}
|
|
27
|
-
getItemsFromParentId(id) {
|
|
28
|
-
var _a;
|
|
29
|
-
return ((_a = this.menu.find((i) => i.id === id)) === null || _a === void 0 ? void 0 : _a.items) || [];
|
|
30
|
-
}
|
|
31
|
-
getActiveSubmenuParent() {
|
|
32
|
-
// On hover show howver content and otherwise show the selected submenu
|
|
33
|
-
const parentId = !navigationItemHover.value && !navigationDrawerHover.value
|
|
34
|
-
? navigationRailSelected.value
|
|
35
|
-
: navigationRailActive.value;
|
|
36
|
-
if (parentId === null) {
|
|
37
|
-
return null;
|
|
38
|
-
}
|
|
39
|
-
return parentId;
|
|
40
|
-
}
|
|
41
|
-
loadPage(id) {
|
|
42
|
-
this.pageId = id;
|
|
43
|
-
}
|
|
44
|
-
handlSubMenuBackClick() {
|
|
45
|
-
navigationRailActive.value = null;
|
|
46
|
-
}
|
|
47
|
-
handleNavigationSubClicked(i, parentId) {
|
|
48
|
-
navigationRailSelected.value = parentId;
|
|
49
|
-
if ((i.items || []).length > 0) {
|
|
50
|
-
this.toggleExpanded(i.id);
|
|
51
|
-
}
|
|
52
|
-
else {
|
|
53
|
-
navigationSubSelected.value = i.id;
|
|
54
|
-
this.loadPage(navigationSubSelected.value);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
handleRailClick(id) {
|
|
58
|
-
var _a;
|
|
59
|
-
if (navigationRailSelected.value !== id) {
|
|
60
|
-
// Set new selected rail item
|
|
61
|
-
navigationRailSelected.value = id;
|
|
62
|
-
// Reset selected sub menu item
|
|
63
|
-
navigationSubSelected.value = null;
|
|
64
|
-
const items = ((_a = this.menu.find((i) => i.id === id)) === null || _a === void 0 ? void 0 : _a.items) || [];
|
|
65
|
-
if (items.length > 0) {
|
|
66
|
-
navigationRailActive.value = id;
|
|
67
|
-
}
|
|
68
|
-
// If persistent menu close the drawer when a item is clicked and does not has children items
|
|
69
|
-
if (navigationDrawerPersistent.value) {
|
|
70
|
-
this.drawer.open = items.length > 0 ? true : false;
|
|
71
|
-
}
|
|
72
|
-
this.loadPage(navigationRailSelected.value);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
render() {
|
|
76
|
-
return html ``;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
__decorate([
|
|
80
|
-
property({ type: String })
|
|
81
|
-
], ExmNavigationBase.prototype, "pageId", void 0);
|
|
82
|
-
__decorate([
|
|
83
|
-
query('#drawer')
|
|
84
|
-
], ExmNavigationBase.prototype, "drawer", void 0);
|
|
85
|
-
//# sourceMappingURL=exm-navigation-base.js.map
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import '@material/mwc-drawer';
|
|
3
|
-
import { Drawer } from '@material/mwc-drawer';
|
|
4
|
-
declare const ExmNavigationDrawerBase_base: typeof LitElement;
|
|
5
|
-
export declare class ExmNavigationDrawerBase extends ExmNavigationDrawerBase_base {
|
|
6
|
-
open: boolean;
|
|
7
|
-
drawer?: Drawer;
|
|
8
|
-
persistent: boolean;
|
|
9
|
-
hoverIn: () => void;
|
|
10
|
-
handleClose: () => void;
|
|
11
|
-
hoverOut: () => void;
|
|
12
|
-
private _itemHover;
|
|
13
|
-
private _drawerHover;
|
|
14
|
-
private _asideElement?;
|
|
15
|
-
private _observer;
|
|
16
|
-
hasActiveSubmenu(): boolean;
|
|
17
|
-
updateInlineStyles(): void;
|
|
18
|
-
constructor();
|
|
19
|
-
disconnectedCallback(): void;
|
|
20
|
-
toggle(): void;
|
|
21
|
-
_handleClose(): void;
|
|
22
|
-
_hoverIn(): void;
|
|
23
|
-
_hoverOut(): void;
|
|
24
|
-
hidemenu(): void;
|
|
25
|
-
protected updated(): void;
|
|
26
|
-
protected firstUpdated(): Promise<void>;
|
|
27
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
28
|
-
}
|
|
29
|
-
export {};
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html } from 'lit';
|
|
3
|
-
import { property, query } from 'lit/decorators.js';
|
|
4
|
-
import '@material/mwc-drawer';
|
|
5
|
-
import { ResizeController } from '@lit-labs/observers/resize-controller.js';
|
|
6
|
-
import { navigationDrawerHover, navigationItemHover, navigationDrawerOpen, navigationRailHidden, navigationDrawerPersistent, navigationActiveHasSubmenu, } from './exm-navigation-signals.js';
|
|
7
|
-
import { SignalWatcher } from '@lit-labs/preact-signals';
|
|
8
|
-
import { observer } from '@exmg/lit-base';
|
|
9
|
-
// eslint-disable-next-line
|
|
10
|
-
export class ExmNavigationDrawerBase extends SignalWatcher(LitElement) {
|
|
11
|
-
hasActiveSubmenu() {
|
|
12
|
-
let activeHasSubMenu = false;
|
|
13
|
-
for (const key in navigationActiveHasSubmenu.value) {
|
|
14
|
-
// eslint-disable-next-line
|
|
15
|
-
if (navigationActiveHasSubmenu.value.hasOwnProperty(key) && navigationActiveHasSubmenu.value[key]) {
|
|
16
|
-
activeHasSubMenu = true;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
return activeHasSubMenu;
|
|
20
|
-
}
|
|
21
|
-
updateInlineStyles() {
|
|
22
|
-
const drawer = this.drawer;
|
|
23
|
-
if (drawer) {
|
|
24
|
-
const shadowRoot = drawer.shadowRoot;
|
|
25
|
-
const asideElement = shadowRoot.querySelector('aside');
|
|
26
|
-
if (asideElement) {
|
|
27
|
-
asideElement.style.left = navigationRailHidden.value ? '0px' : 'var(--_exm-navigation-rail-nav-width)';
|
|
28
|
-
}
|
|
29
|
-
const contentElement = shadowRoot.querySelector('div.mdc-drawer-app-content');
|
|
30
|
-
if (contentElement) {
|
|
31
|
-
// @ts-ignore
|
|
32
|
-
contentElement.style.marginLeft = navigationRailHidden.value
|
|
33
|
-
? '0px'
|
|
34
|
-
: this.open
|
|
35
|
-
? 'var(--mdc-drawer-width, 256px)'
|
|
36
|
-
: '0px';
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
constructor() {
|
|
41
|
-
super();
|
|
42
|
-
this.open = false;
|
|
43
|
-
this.persistent = false;
|
|
44
|
-
this._itemHover = false;
|
|
45
|
-
this._drawerHover = false;
|
|
46
|
-
// @ts-ignore
|
|
47
|
-
this._observer = new ResizeController(this, {
|
|
48
|
-
target: window.document.body,
|
|
49
|
-
callback: (entries) => {
|
|
50
|
-
const entry = entries.pop();
|
|
51
|
-
if (!entry || !entry.contentRect)
|
|
52
|
-
return;
|
|
53
|
-
const width = entry.contentRect.width;
|
|
54
|
-
const persistentWidth = width > 1560;
|
|
55
|
-
const activeHasSubMenu = this.hasActiveSubmenu();
|
|
56
|
-
// If root nav item set and has submenu and persistent width meets the criteria
|
|
57
|
-
const persistent = activeHasSubMenu && persistentWidth;
|
|
58
|
-
if (this.persistent !== persistent) {
|
|
59
|
-
if (!persistent) {
|
|
60
|
-
this.open = false;
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
this.open = true;
|
|
64
|
-
}
|
|
65
|
-
this.persistent = persistent;
|
|
66
|
-
}
|
|
67
|
-
navigationRailHidden.value = width < 961;
|
|
68
|
-
this.updateInlineStyles();
|
|
69
|
-
},
|
|
70
|
-
});
|
|
71
|
-
// Bind methods to ensure the correct 'this' context
|
|
72
|
-
this.hoverIn = this._hoverIn.bind(this);
|
|
73
|
-
this.hoverOut = this._hoverOut.bind(this);
|
|
74
|
-
this.handleClose = this._handleClose.bind(this);
|
|
75
|
-
}
|
|
76
|
-
disconnectedCallback() {
|
|
77
|
-
// Clean up listeners
|
|
78
|
-
this._asideElement.removeEventListener('mouseenter', this.hoverIn);
|
|
79
|
-
this._asideElement.removeEventListener('mouseleave', this.hoverOut);
|
|
80
|
-
this.removeEventListener('drawer-close', this.handleClose);
|
|
81
|
-
}
|
|
82
|
-
toggle() {
|
|
83
|
-
this.open = !this.open;
|
|
84
|
-
}
|
|
85
|
-
_handleClose() {
|
|
86
|
-
this.open = false;
|
|
87
|
-
}
|
|
88
|
-
_hoverIn() {
|
|
89
|
-
navigationDrawerHover.value = true;
|
|
90
|
-
}
|
|
91
|
-
_hoverOut() {
|
|
92
|
-
navigationDrawerHover.value = false;
|
|
93
|
-
}
|
|
94
|
-
hidemenu() {
|
|
95
|
-
// Hide submenu when drawer is not persistent when mouse leaves the drawer or menu items
|
|
96
|
-
if (!this._itemHover && !this._drawerHover && !(this.persistent && this.hasActiveSubmenu())) {
|
|
97
|
-
this.open = false;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
updated() {
|
|
101
|
-
if (this._itemHover !== navigationItemHover.value) {
|
|
102
|
-
this._itemHover = navigationItemHover.value;
|
|
103
|
-
if (this._itemHover) {
|
|
104
|
-
this.open = true;
|
|
105
|
-
}
|
|
106
|
-
if (!this._itemHover) {
|
|
107
|
-
// Timeout to allow for mouse transition to the content element
|
|
108
|
-
setTimeout(this.hidemenu.bind(this), 100);
|
|
109
|
-
}
|
|
110
|
-
else {
|
|
111
|
-
this.hidemenu();
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
if (this._drawerHover !== navigationDrawerHover.value) {
|
|
115
|
-
this._drawerHover = navigationDrawerHover.value;
|
|
116
|
-
this.hidemenu();
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
async firstUpdated() {
|
|
120
|
-
await this.updateComplete;
|
|
121
|
-
const drawer = this.drawer;
|
|
122
|
-
if (drawer) {
|
|
123
|
-
const shadowRoot = drawer.shadowRoot;
|
|
124
|
-
if (shadowRoot) {
|
|
125
|
-
const asideElement = shadowRoot.querySelector('aside');
|
|
126
|
-
if (asideElement) {
|
|
127
|
-
// Hack custom styles in the aside element
|
|
128
|
-
asideElement.style.borderRightWidth = '0px';
|
|
129
|
-
asideElement.style.borderRadius = '0px 16px 16px 0px';
|
|
130
|
-
asideElement.style.top = '0px';
|
|
131
|
-
asideElement.style.bottom = '0px';
|
|
132
|
-
asideElement.style.height = 'unset';
|
|
133
|
-
asideElement.style.transitionProperty = 'transform, box-shadow';
|
|
134
|
-
asideElement.style.transitionDuration = '300ms';
|
|
135
|
-
asideElement.style.transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
|
|
136
|
-
asideElement.style.background = `var(--md-sys-color-surface-container)`;
|
|
137
|
-
asideElement.style.borderLeft = '1px solid var(--md-sys-color-outline-variant)';
|
|
138
|
-
asideElement.style.left = 'var(--_exm-navigation-rail-nav-width)';
|
|
139
|
-
// Add event listeners to the aside element
|
|
140
|
-
asideElement.addEventListener('mouseenter', this.hoverIn);
|
|
141
|
-
asideElement.addEventListener('mouseleave', this.hoverOut);
|
|
142
|
-
this._asideElement = asideElement;
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
this.addEventListener('drawer-close', this.handleClose);
|
|
147
|
-
}
|
|
148
|
-
render() {
|
|
149
|
-
return html `<mwc-drawer type="dismissible" ?open=${this.open}>
|
|
150
|
-
<div class="content">
|
|
151
|
-
<slot></slot>
|
|
152
|
-
</div>
|
|
153
|
-
<slot name="appContent" slot="appContent"></slot>
|
|
154
|
-
</mwc-drawer>`;
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
__decorate([
|
|
158
|
-
property({ type: Boolean }),
|
|
159
|
-
observer(function (value) {
|
|
160
|
-
navigationDrawerOpen.value = value;
|
|
161
|
-
this.updateInlineStyles();
|
|
162
|
-
})
|
|
163
|
-
], ExmNavigationDrawerBase.prototype, "open", void 0);
|
|
164
|
-
__decorate([
|
|
165
|
-
query('mwc-drawer')
|
|
166
|
-
], ExmNavigationDrawerBase.prototype, "drawer", void 0);
|
|
167
|
-
__decorate([
|
|
168
|
-
property({ type: Boolean }),
|
|
169
|
-
observer(function (value) {
|
|
170
|
-
navigationDrawerPersistent.value = value;
|
|
171
|
-
})
|
|
172
|
-
], ExmNavigationDrawerBase.prototype, "persistent", void 0);
|
|
173
|
-
//# sourceMappingURL=exm-navigation-drawer-base.js.map
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import '@material/web/list/list.js';
|
|
2
|
-
import '@material/web/list/list-item.js';
|
|
3
|
-
import { ExmgElement } from '@exmg/lit-base';
|
|
4
|
-
declare const ExmNavigationDrawerNav_base: typeof ExmgElement;
|
|
5
|
-
export declare class ExmNavigationDrawerNav extends ExmNavigationDrawerNav_base {
|
|
6
|
-
static styles: import("lit").CSSResult[];
|
|
7
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
8
|
-
}
|
|
9
|
-
export {};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { html, css } from 'lit';
|
|
3
|
-
import { customElement } from 'lit/decorators.js';
|
|
4
|
-
import { navigationRailHidden, navigationRailActive } from './exm-navigation-signals.js';
|
|
5
|
-
import { SignalWatcher } from '@lit-labs/preact-signals';
|
|
6
|
-
import '@material/web/list/list.js';
|
|
7
|
-
import '@material/web/list/list-item.js';
|
|
8
|
-
import { ExmgElement } from '@exmg/lit-base';
|
|
9
|
-
let ExmNavigationDrawerNav = class ExmNavigationDrawerNav extends SignalWatcher(ExmgElement) {
|
|
10
|
-
render() {
|
|
11
|
-
return navigationRailHidden.value
|
|
12
|
-
? html `<div class="nav">
|
|
13
|
-
<div class="header">
|
|
14
|
-
<md-icon-button @click=${() => this.fire('drawer-close', null, true)}
|
|
15
|
-
><md-icon>menu_open</md-icon></md-icon-button
|
|
16
|
-
>
|
|
17
|
-
</div>
|
|
18
|
-
<div class="navigation">
|
|
19
|
-
${navigationRailActive.value === null
|
|
20
|
-
? html `<div class="nav top-level"><slot name="topLevel"></slot></div>`
|
|
21
|
-
: html `<div class="nav"><slot name="navTop"></slot><slot></slot></div>`}
|
|
22
|
-
</div>
|
|
23
|
-
</div>`
|
|
24
|
-
: html `<slot></slot>`;
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
ExmNavigationDrawerNav.styles = [
|
|
28
|
-
css `
|
|
29
|
-
:host {
|
|
30
|
-
display: block;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.nav {
|
|
34
|
-
margin: 8px 0 auto;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.header md-icon-button {
|
|
38
|
-
margin: 4px 12px 8px 16px;
|
|
39
|
-
}
|
|
40
|
-
`,
|
|
41
|
-
];
|
|
42
|
-
ExmNavigationDrawerNav = __decorate([
|
|
43
|
-
customElement('exm-navigation-drawer-nav')
|
|
44
|
-
// eslint-disable-next-line
|
|
45
|
-
], ExmNavigationDrawerNav);
|
|
46
|
-
export { ExmNavigationDrawerNav };
|
|
47
|
-
//# sourceMappingURL=exm-navigation-drawer-nav.js.map
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
3
|
-
export class ExmNavigationRailBase extends ExmgElement {
|
|
4
|
-
render() {
|
|
5
|
-
return html `<div class="top"><slot name="top"></slot></div>
|
|
6
|
-
<div class="nav"><slot></slot></div>
|
|
7
|
-
<div class="bottom"><slot name="bottom"></slot></div>`;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
//# sourceMappingURL=exm-navigation-rail-base.js.map
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html } from 'lit';
|
|
3
|
-
import { property } from 'lit/decorators.js';
|
|
4
|
-
import { navigationItemHover, navigationRailActive, navigationActiveHasSubmenu } from './exm-navigation-signals.js';
|
|
5
|
-
import '@material/web/focus/md-focus-ring.js';
|
|
6
|
-
import { observer } from '@exmg/lit-base';
|
|
7
|
-
export class ExmNavigationRailNavItemBase extends LitElement {
|
|
8
|
-
constructor() {
|
|
9
|
-
super();
|
|
10
|
-
this.icon = '';
|
|
11
|
-
this.selected = false;
|
|
12
|
-
this.hasSubMenu = false;
|
|
13
|
-
// eslint-disable-next-line
|
|
14
|
-
this.setAttribute('role', 'link');
|
|
15
|
-
// Bind methods to ensure the correct 'this' context
|
|
16
|
-
this.hoverIn = this.hoverIn.bind(this);
|
|
17
|
-
this.hoverOut = this.hoverOut.bind(this);
|
|
18
|
-
// Add event listeners in the constructor
|
|
19
|
-
this.addEventListener('mouseenter', this.hoverIn);
|
|
20
|
-
this.addEventListener('mouseleave', this.hoverOut);
|
|
21
|
-
}
|
|
22
|
-
deselectOtherOptions(id) {
|
|
23
|
-
for (const key in navigationActiveHasSubmenu.value) {
|
|
24
|
-
// eslint-disable-next-line
|
|
25
|
-
if (navigationActiveHasSubmenu.value.hasOwnProperty(key) && key !== id) {
|
|
26
|
-
navigationActiveHasSubmenu.value[key] = false;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
hoverIn() {
|
|
31
|
-
if (this.hasSubMenu) {
|
|
32
|
-
navigationItemHover.value = true;
|
|
33
|
-
navigationRailActive.value = this.itemId;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
hoverOut() {
|
|
37
|
-
navigationItemHover.value = false;
|
|
38
|
-
}
|
|
39
|
-
render() {
|
|
40
|
-
return html ` <button>
|
|
41
|
-
<md-focus-ring></md-focus-ring><span class="symbols">${this.icon}</span>
|
|
42
|
-
<div class="label">${this.label}</div>
|
|
43
|
-
</button>`;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
__decorate([
|
|
47
|
-
property({ type: String })
|
|
48
|
-
], ExmNavigationRailNavItemBase.prototype, "icon", void 0);
|
|
49
|
-
__decorate([
|
|
50
|
-
property({ type: String })
|
|
51
|
-
], ExmNavigationRailNavItemBase.prototype, "itemId", void 0);
|
|
52
|
-
__decorate([
|
|
53
|
-
property({ type: String })
|
|
54
|
-
], ExmNavigationRailNavItemBase.prototype, "label", void 0);
|
|
55
|
-
__decorate([
|
|
56
|
-
property({ type: Boolean, reflect: true }),
|
|
57
|
-
observer(function (value) {
|
|
58
|
-
if (this.itemId) {
|
|
59
|
-
navigationActiveHasSubmenu.value[this.itemId] = value && this.hasSubMenu;
|
|
60
|
-
if (navigationActiveHasSubmenu.value[this.itemId] && value) {
|
|
61
|
-
this.deselectOtherOptions(this.itemId);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
})
|
|
65
|
-
], ExmNavigationRailNavItemBase.prototype, "selected", void 0);
|
|
66
|
-
__decorate([
|
|
67
|
-
property({ type: Boolean })
|
|
68
|
-
], ExmNavigationRailNavItemBase.prototype, "hasSubMenu", void 0);
|
|
69
|
-
//# sourceMappingURL=exm-navigation-rail-nav-item-base.js.map
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ExmNavigationRailNavBase } from './exm-navigation-rail-nav-base.js';
|
|
2
|
-
export declare class ExmNavigationRailNav extends ExmNavigationRailNavBase {
|
|
3
|
-
static styles: import("lit").CSSResult[];
|
|
4
|
-
}
|
|
5
|
-
declare global {
|
|
6
|
-
interface HTMLElementTagNameMap {
|
|
7
|
-
'exm-navigation-rail-nav': ExmNavigationRailNav;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { customElement } from 'lit/decorators.js';
|
|
3
|
-
import { style } from './styles/exm-navigation-rail-nav-css.js';
|
|
4
|
-
import { ExmNavigationRailNavBase } from './exm-navigation-rail-nav-base.js';
|
|
5
|
-
let ExmNavigationRailNav = class ExmNavigationRailNav extends ExmNavigationRailNavBase {
|
|
6
|
-
};
|
|
7
|
-
ExmNavigationRailNav.styles = [style];
|
|
8
|
-
ExmNavigationRailNav = __decorate([
|
|
9
|
-
customElement('exm-navigation-rail-nav')
|
|
10
|
-
], ExmNavigationRailNav);
|
|
11
|
-
export { ExmNavigationRailNav };
|
|
12
|
-
//# sourceMappingURL=exm-navigation-rail-nav.js.map
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export declare const navigationItemHover: import("@preact/signals-core").Signal<boolean>;
|
|
2
|
-
export declare const navigationDrawerHover: import("@preact/signals-core").Signal<boolean>;
|
|
3
|
-
export declare const navigationDrawerOpen: import("@preact/signals-core").Signal<boolean>;
|
|
4
|
-
export declare const navigationActiveHasSubmenu: import("@preact/signals-core").Signal<{
|
|
5
|
-
[k: string]: boolean;
|
|
6
|
-
}>;
|
|
7
|
-
export declare const navigationRailSelected: import("@preact/signals-core").Signal<string | null>;
|
|
8
|
-
export declare const navigationSubSelected: import("@preact/signals-core").Signal<string | null>;
|
|
9
|
-
export declare const navigationRailActive: import("@preact/signals-core").Signal<string | null>;
|
|
10
|
-
export declare const navigationRailHidden: import("@preact/signals-core").Signal<boolean>;
|
|
11
|
-
export declare const navigationDrawerPersistent: import("@preact/signals-core").Signal<boolean>;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { signal } from '@lit-labs/preact-signals';
|
|
2
|
-
export const navigationItemHover = signal(false);
|
|
3
|
-
export const navigationDrawerHover = signal(false);
|
|
4
|
-
export const navigationDrawerOpen = signal(false);
|
|
5
|
-
export const navigationActiveHasSubmenu = signal({});
|
|
6
|
-
export const navigationRailSelected = signal(null);
|
|
7
|
-
export const navigationSubSelected = signal(null);
|
|
8
|
-
export const navigationRailActive = signal(null);
|
|
9
|
-
export const navigationRailHidden = signal(false);
|
|
10
|
-
export const navigationDrawerPersistent = signal(false);
|
|
11
|
-
//# sourceMappingURL=exm-navigation-signals.js.map
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ExmgElement } from '@exmg/lit-base';
|
|
2
|
-
import '@material/web/iconbutton/icon-button.js';
|
|
3
|
-
import '@material/web/icon/icon.js';
|
|
4
|
-
import '@material/mwc-top-app-bar-fixed';
|
|
5
|
-
export declare class ExmNavigationToolbarBase extends ExmgElement {
|
|
6
|
-
protected firstUpdated(): void;
|
|
7
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
8
|
-
}
|