@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.
Files changed (101) hide show
  1. package/README.md +73 -0
  2. package/dist/exm-navigation-base.d.ts +131 -0
  3. package/dist/exm-navigation-base.js +391 -0
  4. package/dist/exm-navigation-drawer-base.d.ts +11 -0
  5. package/dist/exm-navigation-drawer-base.js +52 -0
  6. package/dist/exm-navigation-drawer-menu-base.d.ts +12 -0
  7. package/dist/exm-navigation-drawer-menu-base.js +45 -0
  8. package/dist/exm-navigation-drawer-menu.d.ts +9 -0
  9. package/dist/exm-navigation-drawer-menu.js +12 -0
  10. package/dist/exm-navigation-drawer-nav-item-base.d.ts +14 -0
  11. package/dist/exm-navigation-drawer-nav-item-base.js +49 -0
  12. package/dist/exm-navigation-drawer-nav-item.d.ts +8 -0
  13. package/dist/exm-navigation-drawer-nav-item.js +10 -0
  14. package/{src → dist}/exm-navigation-drawer.d.ts +0 -1
  15. package/{src → dist}/exm-navigation-drawer.js +0 -2
  16. package/dist/exm-navigation-icon-base.d.ts +7 -0
  17. package/dist/exm-navigation-icon-base.js +20 -0
  18. package/dist/exm-navigation-icon-button-base.d.ts +9 -0
  19. package/dist/exm-navigation-icon-button-base.js +36 -0
  20. package/dist/exm-navigation-icon-button.d.ts +8 -0
  21. package/dist/exm-navigation-icon-button.js +10 -0
  22. package/dist/exm-navigation-icon.d.ts +8 -0
  23. package/dist/exm-navigation-icon.js +10 -0
  24. package/dist/exm-navigation-rail-base.d.ts +12 -0
  25. package/dist/exm-navigation-rail-base.js +55 -0
  26. package/{src → dist}/exm-navigation-rail-nav-item-base.d.ts +2 -4
  27. package/dist/exm-navigation-rail-nav-item-base.js +37 -0
  28. package/{src → dist}/exm-navigation-rail-nav-item.d.ts +0 -1
  29. package/{src → dist}/exm-navigation-rail-nav-item.js +0 -2
  30. package/{src → dist}/exm-navigation-rail.d.ts +0 -1
  31. package/{src → dist}/exm-navigation-rail.js +0 -2
  32. package/dist/exm-navigation-sub-menu-base.d.ts +28 -0
  33. package/dist/exm-navigation-sub-menu-base.js +153 -0
  34. package/dist/exm-navigation-sub-menu.d.ts +8 -0
  35. package/dist/exm-navigation-sub-menu.js +10 -0
  36. package/dist/exm-navigation-topbar-base.d.ts +10 -0
  37. package/dist/exm-navigation-topbar-base.js +33 -0
  38. package/dist/exm-navigation-topbar.d.ts +8 -0
  39. package/dist/exm-navigation-topbar.js +10 -0
  40. package/dist/exm-navigation.d.ts +8 -0
  41. package/dist/exm-navigation.js +10 -0
  42. package/dist/index.d.ts +12 -0
  43. package/dist/index.js +13 -0
  44. package/dist/mixins/media-queries.d.ts +8 -0
  45. package/dist/mixins/media-queries.js +57 -0
  46. package/{src/styles/exm-navigation-rail-nav-css.d.ts → dist/styles/exm-navigation-css.d.ts} +0 -1
  47. package/dist/styles/exm-navigation-css.js +72 -0
  48. package/{src → dist}/styles/exm-navigation-drawer-css.d.ts +0 -1
  49. package/dist/styles/exm-navigation-drawer-css.js +35 -0
  50. package/dist/styles/exm-navigation-drawer-nav-item-css.d.ts +1 -0
  51. package/dist/styles/exm-navigation-drawer-nav-item-css.js +84 -0
  52. package/dist/styles/exm-navigation-icon-button-css.d.ts +1 -0
  53. package/dist/styles/exm-navigation-icon-button-css.js +29 -0
  54. package/dist/styles/exm-navigation-icon-css.d.ts +1 -0
  55. package/dist/styles/exm-navigation-icon-css.js +22 -0
  56. package/{src → dist}/styles/exm-navigation-rail-css.d.ts +0 -1
  57. package/dist/styles/exm-navigation-rail-css.js +50 -0
  58. package/{src → dist}/styles/exm-navigation-rail-nav-item-css.d.ts +0 -1
  59. package/dist/styles/exm-navigation-rail-nav-item-css.js +94 -0
  60. package/dist/styles/exm-navigation-sub-menu-css.d.ts +1 -0
  61. package/dist/styles/exm-navigation-sub-menu-css.js +21 -0
  62. package/dist/styles/exm-navigation-topbar-css.d.ts +1 -0
  63. package/dist/styles/exm-navigation-topbar-css.js +30 -0
  64. package/dist/types.d.ts +8 -0
  65. package/dist/types.js +2 -0
  66. package/package.json +19 -20
  67. package/index.d.ts +0 -16
  68. package/index.js +0 -17
  69. package/src/exm-navigation-base.d.ts +0 -30
  70. package/src/exm-navigation-base.js +0 -85
  71. package/src/exm-navigation-drawer-base.d.ts +0 -29
  72. package/src/exm-navigation-drawer-base.js +0 -173
  73. package/src/exm-navigation-drawer-nav.d.ts +0 -9
  74. package/src/exm-navigation-drawer-nav.js +0 -47
  75. package/src/exm-navigation-rail-base.d.ts +0 -4
  76. package/src/exm-navigation-rail-base.js +0 -10
  77. package/src/exm-navigation-rail-nav-base.d.ts +0 -4
  78. package/src/exm-navigation-rail-nav-base.js +0 -9
  79. package/src/exm-navigation-rail-nav-item-base.js +0 -69
  80. package/src/exm-navigation-rail-nav.d.ts +0 -9
  81. package/src/exm-navigation-rail-nav.js +0 -12
  82. package/src/exm-navigation-signals.d.ts +0 -11
  83. package/src/exm-navigation-signals.js +0 -11
  84. package/src/exm-navigation-toolbar-base.d.ts +0 -8
  85. package/src/exm-navigation-toolbar-base.js +0 -33
  86. package/src/exm-navigation-toolbar.d.ts +0 -9
  87. package/src/exm-navigation-toolbar.js +0 -12
  88. package/src/styles/exm-navigation-drawer-css.js +0 -4
  89. package/src/styles/exm-navigation-drawer.scss +0 -29
  90. package/src/styles/exm-navigation-rail-css.js +0 -4
  91. package/src/styles/exm-navigation-rail-nav-css.js +0 -4
  92. package/src/styles/exm-navigation-rail-nav-item-css.js +0 -4
  93. package/src/styles/exm-navigation-rail-nav-item.scss +0 -107
  94. package/src/styles/exm-navigation-rail-nav.scss +0 -7
  95. package/src/styles/exm-navigation-rail.scss +0 -35
  96. package/src/styles/exm-navigation-styles-css.d.ts +0 -2
  97. package/src/styles/exm-navigation-styles-css.js +0 -4
  98. package/src/styles/exm-navigation-styles.scss +0 -46
  99. package/src/styles/exm-navigation-toolbar-css.d.ts +0 -2
  100. package/src/styles/exm-navigation-toolbar-css.js +0 -4
  101. package/src/styles/exm-navigation-toolbar.scss +0 -18
@@ -0,0 +1,8 @@
1
+ export interface MenuItem {
2
+ id: string;
3
+ label: string;
4
+ path?: string;
5
+ url?: string;
6
+ icon?: string;
7
+ items?: MenuItem[];
8
+ }
package/dist/types.js ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
package/package.json CHANGED
@@ -1,24 +1,25 @@
1
1
  {
2
2
  "name": "@exmg/exm-navigation",
3
- "version": "1.0.3",
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-rail.js": "./src/exm-navigation-rail.js",
10
- "./exm-navigation-rail-nav.js": "./src/exm-navigation-rail-nav.js",
11
- "./exm-navigation-rail-nav-item.js": "./src/exm-navigation-rail-nav-item.js",
12
- "./exm-navigation-drawer.js": "./src/exm-navigation-drawer.js",
13
- "./exm-navigation-toolbar.js": "./src/exm-navigation-toolbar.js",
14
- "./exm-navigation-drawer-nav.js": "./src/exm-navigation-drawer-nav.js",
15
- "./exm-navigation-base.js": "./src/ExmNavigationBase.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"
16
19
  },
17
20
  "dependencies": {
18
21
  "@exmg/lit-base": "^3.0.0",
19
- "@lit-labs/observers": "^2.0.2",
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://github.com/exmg/exmachina-web-components",
41
+ "homepage": "https://bitbucket.org/exmachina/exm-web-components",
41
42
  "repository": {
42
43
  "type": "git",
43
- "url": "git@github.com:exmg/exm-web-components.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": "8504f0aac4737b66d3eb579953c45b56a110cb91"
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,4 +0,0 @@
1
- import { ExmgElement } from '@exmg/lit-base/index.js';
2
- export declare class ExmNavigationRailBase extends ExmgElement {
3
- render(): import("lit-html").TemplateResult<1>;
4
- }
@@ -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,4 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class ExmNavigationRailNavBase extends LitElement {
3
- render(): import("lit-html").TemplateResult<1>;
4
- }
@@ -1,9 +0,0 @@
1
- import { LitElement, html } from 'lit';
2
- export class ExmNavigationRailNavBase extends LitElement {
3
- render() {
4
- return html `<nav aria-label="Main">
5
- <slot></slot>
6
- </nav>`;
7
- }
8
- }
9
- //# sourceMappingURL=exm-navigation-rail-nav-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
- }