@exmg/exm-navigation 1.0.3 → 1.1.1

package/README.md

@@ -0,0 +1,72 @@
+# `<exm-navigation>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-navigation.svg)](https://www.npmjs.com/package/@exmg/exm-navigation)
+
+# @exmg/exm-navigation
+
+## Install
+
+```bash
+npm install @exmg/exm-navigation
+```
+
+## Anatomy
+
+This library contains following component:
+
+1. Navigation (main component and fully composed navigation component)
+
+Conceptual usage:
+
+```html
+  <exm-navigation .items=${menuItems} .path=${['spaces']}>
+    <!-- Slot for adding a title to the topbar. Topbar is only visible on mobile -->
+    <section slot="topbar-title">My Title</section>
+    <!-- Slot for adding actions to the right of the topbar. Topbar is only visible on mobile -->
+    <section slot="topbar-actions">Actions</section>
+    <!-- Slot for adding a logo in the top part of the rail. This is not visible on mobile -->
+    <section slot="rail-top">Rail top</section>
+    <!-- Slot for adding extra actions or other content to the bottom of the rail. This is not visible on mobile -->
+    <section slot="rail-bottom">Rail bottom</section>
+    <!-- The actual page content to display -->
+    <section class="content">${this.renderPage()}</section>
+  </exm-navigation>
+```
+
+Some of the components used in the navigation c an be used separately. Please check the code for implementation
+
+## API
+
+### Slots
+
+| Name             | Description                                                                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------- |
+| `topbar-title`   | Slot for adding a title to the topbar. Topbar is only visible on mobile                                 |
+| `topbar-actions` | Slot for adding actions to the right of the topbar. Topbar is only visible on mobile                    |
+| `rail-top`       | Slot for adding a logo in the top part of the rail. This is not visible on mobile                       |
+| `rail-bottom`    | Slot for adding extra actions or other content to the bottom of the rail. This is not visible on mobile |
+| `default`        | The actual page content to display                                                                      |
+
+### Properties/Attributes
+
+| Name    | Type         | Default | Description                                                  |
+| ------- | ------------ | ------- | ------------------------------------------------------------ |
+| `items` | `MenuItem[]` | _[]_    | The list of menuitems to display in the navigation component |
+| `path`  | `string[]`   | _[]_    | The current/initial path for the navigation                  |
+
+#### MenuItem
+
+```typescript
+interface MenuItem {
+  id: string;
+  label: string;
+  path?: string;
+  url?: string;
+  icon?: string;
+  items?: MenuItem[];
+}
+```
+
+### Events
+
+| Name                | Detail           | Description                         |
+| ------------------- | ---------------- | ----------------------------------- |
+| `navigation-change` | `['one', 'two']` | The path selected in the navigation |

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.1",
   "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": "e7086831faea0bdfe8628b0de9b7ddcc45174558"
 }

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
+     */
+    private handleRailItemClick;
+    /**
+     * 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 {};