@exmg/exm-navigation 1.0.3 → 1.1.0

package/index.d.ts

@@ -1,16 +1,12 @@
-export { ExmNavigationRailNavItem } from './src/exm-navigation-rail-nav-item.js';
-export { ExmNavigationRailNav } from './src/exm-navigation-rail-nav.js';
-export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
-export { ExmNavigationRail } from './src/exm-navigation-rail.js';
-export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
-export { ExmNavigationDrawer } from './src/exm-navigation-drawer.js';
-export { ExmNavigationToolbarBase } from './src/exm-navigation-toolbar-base.js';
+export { ExmNavigation } from './src/exm-navigation.js';
 export { ExmNavigationBase } from './src/exm-navigation-base.js';
-export { navigationItemHover, navigationDrawerHover, navigationDrawerOpen, navigationRailSelected, navigationRailActive, navigationDrawerPersistent, navigationRailHidden, navigationActiveHasSubmenu, navigationSubSelected, } from './src/exm-navigation-signals.js';
-export { SignalWatcher } from '@lit-labs/preact-signals';
-export { style as exmgRailStyles } from './src/styles/exm-navigation-rail-css.js';
-export { style as exmgRailNavStyles } from './src/styles/exm-navigation-rail-nav-css.js';
-export { style as exmgRailNavItemStyles } from './src/styles/exm-navigation-rail-nav-item-css.js';
-export { style as exmgDrawerStyles } from './src/styles/exm-navigation-drawer-css.js';
-export { style as exmgToolbarStyles } from './src/styles/exm-navigation-toolbar-css.js';
-export { style as exmgNavigationDrawerStyles } from './src/styles/exm-navigation-styles-css.js';
+export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
+export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
+export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
+export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
+export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
+export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
+export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
+export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
+export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
+export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';

package/index.js

@@ -1,17 +1,13 @@
-export { ExmNavigationRailNavItem } from './src/exm-navigation-rail-nav-item.js';
-export { ExmNavigationRailNav } from './src/exm-navigation-rail-nav.js';
-export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
-export { ExmNavigationRail } from './src/exm-navigation-rail.js';
-export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
-export { ExmNavigationDrawer } from './src/exm-navigation-drawer.js';
-export { ExmNavigationToolbarBase } from './src/exm-navigation-toolbar-base.js';
+export { ExmNavigation } from './src/exm-navigation.js';
 export { ExmNavigationBase } from './src/exm-navigation-base.js';
-export { navigationItemHover, navigationDrawerHover, navigationDrawerOpen, navigationRailSelected, navigationRailActive, navigationDrawerPersistent, navigationRailHidden, navigationActiveHasSubmenu, navigationSubSelected, } from './src/exm-navigation-signals.js';
-export { SignalWatcher } from '@lit-labs/preact-signals';
-export { style as exmgRailStyles } from './src/styles/exm-navigation-rail-css.js';
-export { style as exmgRailNavStyles } from './src/styles/exm-navigation-rail-nav-css.js';
-export { style as exmgRailNavItemStyles } from './src/styles/exm-navigation-rail-nav-item-css.js';
-export { style as exmgDrawerStyles } from './src/styles/exm-navigation-drawer-css.js';
-export { style as exmgToolbarStyles } from './src/styles/exm-navigation-toolbar-css.js';
-export { style as exmgNavigationDrawerStyles } from './src/styles/exm-navigation-styles-css.js';
+export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
+export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
+export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
+export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
+export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
+export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
+export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
+export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
+export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
+export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
   "exports": {
     ".": "./index.js",
+    "./exm-navigation.js": "./src/exm-navigation.js",
+    "./exm-navigation-drawer.js": "./src/exm-navigation-drawer.js",
+    "./exm-navigation-drawer-menu.js": "./src/exm-navigation-drawer-menu.js",
+    "./exm-navigation-drawer-nav-item.js": "./src/exm-navigation-drawer-nav-item.js",
+    "./exm-navigation-icon.js": "./src/exm-navigation-icon.js",
+    "./exm-navigation-icon-button.js": "./src/exm-navigation-icon-button.js",
     "./exm-navigation-rail.js": "./src/exm-navigation-rail.js",
-    "./exm-navigation-rail-nav.js": "./src/exm-navigation-rail-nav.js",
     "./exm-navigation-rail-nav-item.js": "./src/exm-navigation-rail-nav-item.js",
-    "./exm-navigation-drawer.js": "./src/exm-navigation-drawer.js",
-    "./exm-navigation-toolbar.js": "./src/exm-navigation-toolbar.js",
-    "./exm-navigation-drawer-nav.js": "./src/exm-navigation-drawer-nav.js",
+    "./exm-navigation-topbar.js": "./src/exm-navigation-topbar.js",
     "./exm-navigation-base.js": "./src/ExmNavigationBase.js"
   },
   "dependencies": {
     "@exmg/lit-base": "^3.0.0",
-    "@lit-labs/observers": "^2.0.2",
-    "@lit-labs/preact-signals": "^1.0.1",
     "@material/mwc-drawer": "^0.27.0",
     "@material/mwc-top-app-bar-fixed": "^0.27.0",
     "@material/web": "^2.2.0",
@@ -50,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8504f0aac4737b66d3eb579953c45b56a110cb91"
-}
+  "gitHead": "1973df6ecaaf0a57b688f5eb8852516295bc04d6"
+}

package/src/exm-navigation-base.d.ts

@@ -1,30 +1,105 @@
-import { LitElement } from 'lit';
+import { PropertyValues } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { MenuItem } from './types.js';
 import { ExmNavigationDrawer } from './exm-navigation-drawer.js';
-export interface MenuItem {
-    id: string;
-    label: string;
-    path?: string;
-    url?: string;
-    icon?: string;
-    items?: MenuItem[];
-}
-declare const ExmNavigationBase_base: typeof LitElement;
+import './exm-navigation-icon-button.js';
+import './exm-navigation-topbar.js';
+import './exm-navigation-rail.js';
+import './exm-navigation-sub-menu.js';
+import './exm-navigation-drawer-menu.js';
+import './exm-navigation-drawer.js';
+declare const ExmNavigationBase_base: (new (...args: any[]) => {
+    media: "mobile" | "tablet" | "desktop";
+}) & typeof ExmgElement;
 export declare class ExmNavigationBase extends ExmNavigationBase_base {
-    pageId: string;
+    items: MenuItem[];
+    path: string[];
+    drawerWidth: number;
     drawer?: ExmNavigationDrawer;
+    navContent?: HTMLDivElement;
+    persistent: boolean;
+    selectedItem: string[];
+    activeItem: string[];
+    railOpen: boolean;
+    drawerOpen: boolean;
+    drawerHover: boolean;
+    navigationHasSubmenu: Record<string, boolean>;
+    static styles: import("lit").CSSResult[];
     menu: MenuItem[];
     expandedItems: {
         [k: string]: boolean;
     };
+    unSubscribeSelected: () => void;
+    protected updated(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
     connectedCallback(): void;
-    isSubMenuExpanded(id: string): boolean;
-    toggleExpanded(id: string): void;
-    getItemsFromParentId(id: string): MenuItem[];
-    getActiveSubmenuParent(): string | null;
-    loadPage(id: string): void;
-    handlSubMenuBackClick(): void;
-    handleNavigationSubClicked(i: MenuItem, parentId: string): void;
-    handleRailClick(id: string): void;
+    /**
+     * Set the correct values when the media changes.
+     */
+    handleMediaTypeChange(): void;
+    loadPage(path: string[]): void;
+    /**
+     * Handle Rail item click or Drawer sub menu click.
+     * If the selected menu item has children, we add the first item to the list (as per Google implementation).
+     * In this case we also do not close the drawer in non persistent mode, so the user is able to select a next level in the menu
+     */
+    handleRailItemClick({ detail }: CustomEvent<string>): void;
+    /**
+     * Handle the mouse enter of the rail item.
+     */
+    private handleRailItemMouseEnter;
+    /**
+     * Handle the mouse leave of the rail item.
+     * If the item has no submenu and the current selected item has no submenu, it is safe to close the drawer
+     */
+    private handleRailItemMouseLeave;
+    /**
+     * Handle drawer mouse leave. Should close the drawer
+     */
+    private handleDrawerMouseLeave;
+    /**
+     * Handle the click on a sub menu item
+     * @param param Contains detail. This has the new path to go to.
+     * If the rail is hidden and the selected item has no children, we close the drawer
+     */
+    private handleSubMenuClick;
+    /**
+     * Handle the topbar menu click.
+     * Clicking the menu button in the topbar wil toggle the drawer
+     */
+    private handleTopbarMenuClick;
+    /**
+     * Handle the drawer back button click.
+     * This should reset the active item, so the root-level menu gets triggered
+     */
+    private handleDrawerBackClick;
+    /**
+     * Check if the passed paths last item has children yes or no
+     * @param path Path array
+     * @returns True if the given path has children
+     */
+    private currentSelectedHasChildren;
+    /**
+     * When the rail is not open, show the menu button on top of the drawer to close it
+     */
+    private renderDrawerMenuButton;
+    /**
+     * When no menu item selected, ot only toplevel without children, show the start menu (same as in the rail)
+     * If more levels deep, show the back button
+     */
+    private renderStartMenu;
+    /**
+     * return the sub menus. More then 1 level deep
+     */
+    private renderDrawerSubMenu;
+    /**
+     * Return the Rail
+     */
+    private renderRail;
+    /**
+     * Render the topbar. This is displayed on mobile and contains the menu button and a slot for the title
+     */
+    private renderTopbar;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/src/exm-navigation-base.js

@@ -1,85 +1,315 @@
 import { __decorate } from "tslib";
-import { SignalWatcher } from '@lit-labs/preact-signals';
-import { LitElement, html } from 'lit';
-import { navigationDrawerHover, navigationDrawerPersistent, navigationItemHover, navigationRailActive, navigationRailSelected, navigationSubSelected, } from './exm-navigation-signals.js';
-import { property, query } from 'lit/decorators.js';
-// eslint-disable-next-line
-export class ExmNavigationBase extends SignalWatcher(LitElement) {
+import { html, nothing } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { MediaQueries } from './mixins/media-queries.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { style } from './styles/exm-navigation-css.js';
+import './exm-navigation-icon-button.js';
+import './exm-navigation-topbar.js';
+import './exm-navigation-rail.js';
+import './exm-navigation-sub-menu.js';
+import './exm-navigation-drawer-menu.js';
+import './exm-navigation-drawer.js';
+// eslint-disable-next-line new-cap
+export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     constructor() {
         super(...arguments);
-        this.pageId = 'chat';
+        this.items = [];
+        this.path = ['chat'];
+        this.drawerWidth = 319;
+        this.persistent = true;
+        this.selectedItem = [];
+        this.activeItem = [];
+        this.railOpen = true;
+        this.drawerOpen = false;
+        this.drawerHover = false;
+        this.navigationHasSubmenu = {};
         this.menu = [];
         this.expandedItems = {};
+        this.unSubscribeSelected = () => { };
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('media')) {
+            this.handleMediaTypeChange.bind(this)();
+        }
+        if (changedProperties.has('items')) {
+            for (const item of this.items) {
+                this.navigationHasSubmenu[item.id] = (item.items || []).length > 0;
+            }
+            if (this.navigationHasSubmenu[this.path[0]] && this.persistent) {
+                this.drawerOpen = true;
+            }
+        }
+    }
+    firstUpdated(changedProperties) {
+        if (changedProperties.has('media')) {
+            this.handleMediaTypeChange.bind(this)();
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        navigationRailSelected.value = this.pageId;
-        navigationRailActive.value = this.pageId;
+        this.selectedItem = [...this.path];
+        this.activeItem = [...this.path];
     }
-    isSubMenuExpanded(id) {
-        return !!this.expandedItems[id];
+    /**
+     * Set the correct values when the media changes.
+     */
+    handleMediaTypeChange() {
+        this.persistent = this.media === 'desktop';
+        this.drawerOpen = this.media === 'desktop' && this.navigationHasSubmenu[this.selectedItem[0]];
+        this.railOpen = this.media !== 'mobile';
     }
-    toggleExpanded(id) {
-        const expanded = this.isSubMenuExpanded(id);
-        this.expandedItems[id] = !expanded;
-        this.requestUpdate();
+    loadPage(path) {
+        this.path = path;
+        this.selectedItem = path;
     }
-    getItemsFromParentId(id) {
+    /**
+     * Handle Rail item click or Drawer sub menu click.
+     * If the selected menu item has children, we add the first item to the list (as per Google implementation).
+     * In this case we also do not close the drawer in non persistent mode, so the user is able to select a next level in the menu
+     */
+    handleRailItemClick({ detail }) {
         var _a;
-        return ((_a = this.menu.find((i) => i.id === id)) === null || _a === void 0 ? void 0 : _a.items) || [];
-    }
-    getActiveSubmenuParent() {
-        // On hover show howver content and otherwise show the selected submenu
-        const parentId = !navigationItemHover.value && !navigationDrawerHover.value
-            ? navigationRailSelected.value
-            : navigationRailActive.value;
-        if (parentId === null) {
-            return null;
+        if (this.selectedItem[0] !== detail) {
+            const items = ((_a = this.items.find((item) => item.id === detail)) === null || _a === void 0 ? void 0 : _a.items) || [];
+            if (items.length) {
+                this.selectedItem = [detail, items[0].id];
+            }
+            else {
+                this.selectedItem = [detail];
+            }
+            // copy the selected item to the active item
+            this.activeItem = this.selectedItem;
+            /**
+             * If persistent menu close the drawer when a item is clicked and does not has children items
+             */
+            if (this.persistent) {
+                this.drawerOpen = items.length > 0 || this.navigationHasSubmenu[detail];
+            }
+            else if (items.length === 0) {
+                this.drawerOpen = false;
+            }
+            this.loadPage(this.selectedItem);
         }
-        return parentId;
     }
-    loadPage(id) {
-        this.pageId = id;
-    }
-    handlSubMenuBackClick() {
-        navigationRailActive.value = null;
-    }
-    handleNavigationSubClicked(i, parentId) {
-        navigationRailSelected.value = parentId;
-        if ((i.items || []).length > 0) {
-            this.toggleExpanded(i.id);
+    /**
+     * Handle the mouse enter of the rail item.
+     */
+    handleRailItemMouseEnter({ detail }) {
+        if (this.navigationHasSubmenu[detail]) {
+            this.drawerOpen = true;
+            if (detail !== this.selectedItem[0]) {
+                this.activeItem = [detail];
+                return;
+            }
+        }
+        else if (this.navigationHasSubmenu[this.selectedItem[0]] && this.persistent) {
+            this.activeItem = this.selectedItem;
+            this.drawerOpen = true;
         }
         else {
-            navigationSubSelected.value = i.id;
-            this.loadPage(navigationSubSelected.value);
+            this.activeItem = this.selectedItem;
+            this.drawerOpen = false;
         }
+        this.activeItem = this.selectedItem;
     }
-    handleRailClick(id) {
-        var _a;
-        if (navigationRailSelected.value !== id) {
-            // Set new selected rail item
-            navigationRailSelected.value = id;
-            // Reset selected sub menu item
-            navigationSubSelected.value = null;
-            const items = ((_a = this.menu.find((i) => i.id === id)) === null || _a === void 0 ? void 0 : _a.items) || [];
-            if (items.length > 0) {
-                navigationRailActive.value = id;
-            }
-            // If persistent menu close the drawer when a item is clicked and does not has children items
-            if (navigationDrawerPersistent.value) {
-                this.drawer.open = items.length > 0 ? true : false;
-            }
-            this.loadPage(navigationRailSelected.value);
+    /**
+     * Handle the mouse leave of the rail item.
+     * If the item has no submenu and the current selected item has no submenu, it is safe to close the drawer
+     */
+    handleRailItemMouseLeave({ detail }) {
+        if (!this.navigationHasSubmenu[detail] && !this.navigationHasSubmenu[this.selectedItem[0]]) {
+            this.drawerOpen = false;
+        }
+        if (!this.persistent && !this.navigationHasSubmenu[detail]) {
+            this.drawerOpen = false;
+        }
+    }
+    /**
+     * Handle drawer mouse leave. Should close the drawer
+     */
+    handleDrawerMouseLeave() {
+        if (!this.navigationHasSubmenu[this.selectedItem[0]] || !this.persistent) {
+            this.drawerOpen = false;
         }
+        /**
+         * On mouse leave the drawer we want to set the active item to the selected item.
+         * If not, it will show the active item on every hover and will make navigating in the selected item impossible
+         */
+        this.activeItem = this.selectedItem;
+    }
+    /**
+     * Handle the click on a sub menu item
+     * @param param Contains detail. This has the new path to go to.
+     * If the rail is hidden and the selected item has no children, we close the drawer
+     */
+    handleSubMenuClick({ detail }) {
+        this.selectedItem = detail;
+        this.activeItem = detail;
+        if ((!this.railOpen || !this.persistent) && !this.currentSelectedHasChildren(detail)) {
+            this.drawerOpen = false;
+        }
+    }
+    /**
+     * Handle the topbar menu click.
+     * Clicking the menu button in the topbar wil toggle the drawer
+     */
+    handleTopbarMenuClick() {
+        this.drawerOpen = !this.drawerOpen;
+    }
+    /**
+     * Handle the drawer back button click.
+     * This should reset the active item, so the root-level menu gets triggered
+     */
+    handleDrawerBackClick() {
+        this.activeItem = [];
+    }
+    /**
+     * Check if the passed paths last item has children yes or no
+     * @param path Path array
+     * @returns True if the given path has children
+     */
+    currentSelectedHasChildren(path) {
+        let currentItems = this.items;
+        return path.reduce((_, pathSection) => {
+            const item = currentItems.find((currentItem) => currentItem.id === pathSection);
+            currentItems = (item === null || item === void 0 ? void 0 : item.items) || [];
+            return ((item === null || item === void 0 ? void 0 : item.items) || []).length > 0;
+        }, false);
+    }
+    /**
+     * When the rail is not open, show the menu button on top of the drawer to close it
+     */
+    renderDrawerMenuButton() {
+        return !this.railOpen
+            ? html `
+          <section>
+            <exm-navigation-icon-button
+              icon=${this.drawerOpen ? 'menu_open' : 'menu'}
+              @navigation-icon-button-click=${this.handleTopbarMenuClick}
+            ></exm-navigation-icon-button>
+          </section>
+        `
+            : nothing;
+    }
+    /**
+     * When no menu item selected, ot only toplevel without children, show the start menu (same as in the rail)
+     * If more levels deep, show the back button
+     */
+    renderStartMenu() {
+        return !this.railOpen &&
+            (this.activeItem.length === 0 ||
+                (this.activeItem.length === 1 && !this.currentSelectedHasChildren(this.activeItem)))
+            ? html `<exm-navigation-drawer-menu
+          .items=${this.items}
+          .path=${this.activeItem}
+          @drawer-menu-item-click=${this.handleRailItemClick}
+        ></exm-navigation-drawer-menu>`
+            : !this.railOpen
+                ? html `
+            <section>
+              <exm-navigation-icon-button
+                icon="arrow_back"
+                label="Main menu"
+                @navigation-icon-button-click=${this.handleDrawerBackClick}
+              ></exm-navigation-icon-button>
+            </section>
+          `
+                : nothing;
+    }
+    /**
+     * return the sub menus. More then 1 level deep
+     */
+    renderDrawerSubMenu() {
+        return html `
+      <exm-navigation-sub-menu
+        .items=${this.items}
+        .path=${this.activeItem}
+        @sub-menu-item-click=${this.handleSubMenuClick}
+      ></exm-navigation-sub-menu>
+    `;
+    }
+    /**
+     * Return the Rail
+     */
+    renderRail() {
+        return html `<exm-navigation-rail
+      .items=${this.items}
+      .selected=${this.selectedItem}
+      @rail-item-click=${this.handleRailItemClick}
+      @rail-item-mouseenter=${this.handleRailItemMouseEnter}
+      @rail-item-mouseleave=${this.handleRailItemMouseLeave}
+    ></exm-navigation-rail>`;
+    }
+    /**
+     * Render the topbar. This is displayed on mobile and contains the menu button and a slot for the title
+     */
+    renderTopbar() {
+        return html `<exm-navigation-topbar ?drawer-open=${this.drawerOpen} @topbar-menu-click=${this.handleTopbarMenuClick}>
+      <slot name="topbar-title" slot="topbar-title"></slot>
+    </exm-navigation-topbar>`;
     }
     render() {
-        return html ``;
+        var _a;
+        const containerStyle = {
+            '--exm-drawer-width': `${(((_a = this.items.find((item) => item.id === this.selectedItem[0])) === null || _a === void 0 ? void 0 : _a.items) || []).length > 0 && this.persistent ? this.drawerWidth : 0}px`,
+        };
+        const containerClass = { 'show-topbar': !this.railOpen };
+        return html `
+      <section
+        class="navigation-container ${classMap(containerClass)}"
+        id="navigation-container"
+        style=${styleMap(containerStyle)}
+      >
+        ${this.railOpen ? this.renderRail() : this.renderTopbar()}
+        <exm-navigation-drawer ?open=${this.drawerOpen} @drawer-mouseleave=${this.handleDrawerMouseLeave}>
+          ${[this.renderDrawerMenuButton(), this.renderStartMenu(), this.renderDrawerSubMenu()]}
+        </exm-navigation-drawer>
+        <section class="content">
+          <slot></slot>
+        </section>
+      </section>
+      <slot></slot>
+    `;
     }
 }
+ExmNavigationBase.styles = [style];
 __decorate([
-    property({ type: String })
-], ExmNavigationBase.prototype, "pageId", void 0);
+    property({ type: Array })
+], ExmNavigationBase.prototype, "items", void 0);
 __decorate([
-    query('#drawer')
+    property({ type: Array })
+], ExmNavigationBase.prototype, "path", void 0);
+__decorate([
+    property({ type: Number, attribute: 'drawer-width' })
+], ExmNavigationBase.prototype, "drawerWidth", void 0);
+__decorate([
+    query('exm-navigation-drawer')
 ], ExmNavigationBase.prototype, "drawer", void 0);
+__decorate([
+    query('#navigation-container')
+], ExmNavigationBase.prototype, "navContent", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "persistent", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "selectedItem", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "activeItem", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "railOpen", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "drawerOpen", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "drawerHover", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "navigationHasSubmenu", void 0);
 //# sourceMappingURL=exm-navigation-base.js.map

package/src/exm-navigation-drawer-base.d.ts

@@ -1,29 +1,14 @@
-import { LitElement } from 'lit';
-import '@material/mwc-drawer';
 import { Drawer } from '@material/mwc-drawer';
-declare const ExmNavigationDrawerBase_base: typeof LitElement;
-export declare class ExmNavigationDrawerBase extends ExmNavigationDrawerBase_base {
+import { ExmgElement } from '@exmg/lit-base';
+import '@material/mwc-drawer';
+export declare class ExmNavigationDrawerBase extends ExmgElement {
     open: boolean;
-    drawer?: Drawer;
     persistent: boolean;
-    hoverIn: () => void;
-    handleClose: () => void;
-    hoverOut: () => void;
-    private _itemHover;
-    private _drawerHover;
-    private _asideElement?;
-    private _observer;
-    hasActiveSubmenu(): boolean;
-    updateInlineStyles(): void;
-    constructor();
-    disconnectedCallback(): void;
-    toggle(): void;
-    _handleClose(): void;
-    _hoverIn(): void;
-    _hoverOut(): void;
-    hidemenu(): void;
-    protected updated(): void;
+    drawer?: Drawer;
+    static styles: import("lit").CSSResult[];
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleDrawerClose;
     protected firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }
-export {};