@exmg/exm-navigation 1.1.1 → 1.1.2-alpha.0

package/README.md

@@ -47,10 +47,11 @@ Some of the components used in the navigation c an be used separately. Please ch
 
 ### 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                  |
+| 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                                                |
+| `disable-navigation` | `boolean`    | _false_ | Disable navigation managed by the component. In that case you can use the event to trigger |
 
 #### MenuItem
 

package/{src → dist}/exm-navigation-base.d.ts

@@ -2,6 +2,8 @@ import { PropertyValues } from 'lit';
 import { ExmgElement } from '@exmg/lit-base/index.js';
 import { MenuItem } from './types.js';
 import { ExmNavigationDrawer } from './exm-navigation-drawer.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 import './exm-navigation-icon-button.js';
 import './exm-navigation-topbar.js';
 import './exm-navigation-rail.js';
@@ -10,38 +12,55 @@ import './exm-navigation-drawer-menu.js';
 import './exm-navigation-drawer.js';
 declare const ExmNavigationBase_base: (new (...args: any[]) => {
     media: "mobile" | "tablet" | "desktop";
+    touch: boolean;
 }) & typeof ExmgElement;
 export declare class ExmNavigationBase extends ExmNavigationBase_base {
     items: MenuItem[];
     path: string[];
     drawerWidth: number;
+    disableNavigate: boolean;
     drawer?: ExmNavigationDrawer;
     navContent?: HTMLDivElement;
-    persistent: boolean;
+    /**
+     * The menu item triggered by hovering and entering submenu's
+     * Once an item with endpoint is clicked, this value should be written to activeItem
+     */
     selectedItem: string[];
+    /**
+     * The currently active menu item
+     */
     activeItem: string[];
+    /**
+     * Wether or not the rail should be visible yes or no
+     */
     railOpen: boolean;
+    /**
+     * Wether or not the drawer should be visible yes or no
+     */
     drawerOpen: boolean;
-    drawerHover: boolean;
+    /**
+     * Object with menuitem and a bool for having that path sub items yes or no
+     */
     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;
     /**
      * Set the correct values when the media changes.
      */
-    handleMediaTypeChange(): void;
-    loadPage(path: string[]): void;
+    private handleMediaTypeChange;
+    private getPathEndpoint;
+    private loadPage;
+    /**
+     * Handles the drawer state. If it should be open yes or no.
+     * @param param0
+     */
+    handleDrawerOpen({ mobileForce, tabletForce }?: Record<string, boolean>): 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
+     * In this case we also do not close the drawer in non desktop mode, so the user is able to select a next level in the menu
      */
     private handleRailItemClick;
     /**
@@ -100,6 +119,13 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      * Render the topbar. This is displayed on mobile and contains the menu button and a slot for the title
      */
     private renderTopbar;
+    /**
+     * If there is an active item, and that item has children, the width of the drawer should be set for desktop.
+     * This will push the content to the right.
+     *
+     * @returns the width of the drawer area
+     */
+    private getDrawerWidth;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/{src → dist}/exm-navigation-base.js

@@ -6,6 +6,8 @@ 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 '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 import './exm-navigation-icon-button.js';
 import './exm-navigation-topbar.js';
 import './exm-navigation-rail.js';
@@ -19,16 +21,28 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.items = [];
         this.path = ['chat'];
         this.drawerWidth = 319;
-        this.persistent = true;
+        this.disableNavigate = false;
+        /**
+         * The menu item triggered by hovering and entering submenu's
+         * Once an item with endpoint is clicked, this value should be written to activeItem
+         */
         this.selectedItem = [];
+        /**
+         * The currently active menu item
+         */
         this.activeItem = [];
+        /**
+         * Wether or not the rail should be visible yes or no
+         */
         this.railOpen = true;
+        /**
+         * Wether or not the drawer should be visible yes or no
+         */
         this.drawerOpen = false;
-        this.drawerHover = false;
+        /**
+         * Object with menuitem and a bool for having that path sub items yes or no
+         */
         this.navigationHasSubmenu = {};
-        this.menu = [];
-        this.expandedItems = {};
-        this.unSubscribeSelected = () => { };
     }
     updated(changedProperties) {
         if (changedProperties.has('media')) {
@@ -38,7 +52,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
             for (const item of this.items) {
                 this.navigationHasSubmenu[item.id] = (item.items || []).length > 0;
             }
-            if (this.navigationHasSubmenu[this.path[0]] && this.persistent) {
+            if (this.navigationHasSubmenu[this.path[0]] && this.media === 'desktop') {
                 this.drawerOpen = true;
             }
         }
@@ -57,89 +71,111 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * 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.drawerOpen = this.media === 'desktop' && this.navigationHasSubmenu[this.activeItem[0]];
         this.railOpen = this.media !== 'mobile';
     }
+    getPathEndpoint() {
+        let items = this.items;
+        let result;
+        const checkItems = (path, last) => {
+            const item = items.find((item) => item.id === path);
+            if (last) {
+                return item === null || item === void 0 ? void 0 : item.path;
+            }
+            items = (item === null || item === void 0 ? void 0 : item.items) || [];
+            return;
+        };
+        for (let i = 0; i < this.selectedItem.length; i++) {
+            result = checkItems(this.selectedItem[i], i === this.selectedItem.length - 1);
+        }
+        return result;
+    }
     loadPage(path) {
         this.path = path;
-        this.selectedItem = path;
+        this.activeItem = path;
+        const endPoint = this.getPathEndpoint();
+        // If the route does not have a path, skip navigating
+        if (!endPoint) {
+            return;
+        }
         this.fire('navigation-change', path);
+        if (!this.disableNavigate) {
+            window.history.pushState({}, '', this.getPathEndpoint());
+            window.dispatchEvent(new PopStateEvent('popstate'));
+        }
+    }
+    /**
+     * Handles the drawer state. If it should be open yes or no.
+     * @param param0
+     */
+    handleDrawerOpen({ mobileForce, tabletForce } = {}) {
+        if (this.media === 'mobile' || this.touch) {
+            // Only triggerable by button
+            if (mobileForce || !this.navigationHasSubmenu[this.activeItem[0]]) {
+                this.drawerOpen = false;
+            }
+        }
+        if (this.media === 'tablet') {
+            if (tabletForce) {
+                this.drawerOpen = false;
+            }
+            else {
+                this.drawerOpen = this.navigationHasSubmenu[this.selectedItem[0]];
+            }
+        }
+        if (this.media === 'desktop') {
+            if (this.navigationHasSubmenu[this.activeItem[0]]) {
+                this.drawerOpen = true;
+            }
+            else {
+                this.drawerOpen = this.navigationHasSubmenu[this.selectedItem[0]];
+            }
+        }
     }
     /**
      * 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
+     * In this case we also do not close the drawer in non desktop mode, so the user is able to select a next level in the menu
      */
     handleRailItemClick({ detail }) {
         var _a;
-        if (this.selectedItem[0] !== detail) {
+        if (this.activeItem[0] !== detail || this.media === 'mobile') {
             const items = ((_a = this.items.find((item) => item.id === detail)) === null || _a === void 0 ? void 0 : _a.items) || [];
-            if (items.length) {
+            if (items.length && !this.touch) {
                 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);
+            this.handleDrawerOpen();
         }
     }
     /**
      * 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 {
-            this.activeItem = this.selectedItem;
-            this.drawerOpen = false;
+        if (this.touch) {
+            return;
         }
-        this.activeItem = this.selectedItem;
+        this.selectedItem = [detail];
+        this.handleDrawerOpen();
     }
     /**
      * 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;
-        }
-    }
+    handleRailItemMouseLeave() { }
     /**
      * 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;
+        this.selectedItem = this.activeItem;
+        this.handleDrawerOpen({ tabletForce: true });
     }
     /**
      * Handle the click on a sub menu item
@@ -148,10 +184,13 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      */
     handleSubMenuClick({ detail }) {
         this.selectedItem = detail;
-        this.activeItem = detail;
-        if ((!this.railOpen || !this.persistent) && !this.currentSelectedHasChildren(detail)) {
-            this.drawerOpen = false;
+        const endPoint = this.getPathEndpoint();
+        let mobileForce = false;
+        if (endPoint) {
+            this.loadPage(this.selectedItem);
+            mobileForce = true;
         }
+        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint });
     }
     /**
      * Handle the topbar menu click.
@@ -165,7 +204,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * This should reset the active item, so the root-level menu gets triggered
      */
     handleDrawerBackClick() {
-        this.activeItem = [];
+        this.selectedItem = [];
     }
     /**
      * Check if the passed paths last item has children yes or no
@@ -186,11 +225,10 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     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 class="drawer-menu-button">
+            <md-icon-button @click=${this.handleTopbarMenuClick}>
+              <md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon>
+            </md-icon-button>
           </section>
         `
             : nothing;
@@ -200,34 +238,60 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * If more levels deep, show the back button
      */
     renderStartMenu() {
-        return !this.railOpen &&
-            (this.activeItem.length === 0 ||
-                (this.activeItem.length === 1 && !this.currentSelectedHasChildren(this.activeItem)))
+        if (this.railOpen) {
+            return nothing;
+        }
+        return this.selectedItem.length === 0 ||
+            (this.selectedItem.length === 1 && !this.currentSelectedHasChildren(this.selectedItem))
             ? 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;
+            : html `
+          <section class="drawer-back-button">
+            <exm-navigation-icon-button
+              icon="arrow_back"
+              label="Main menu"
+              @navigation-icon-button-click=${this.handleDrawerBackClick}
+            ></exm-navigation-icon-button>
+          </section>
+        `;
     }
     /**
      * return the sub menus. More then 1 level deep
      */
     renderDrawerSubMenu() {
+        /**
+         *  When the selected item is empty we do not display the submenu on mobile
+         */
+        if (this.selectedItem.length === 0 && this.media === 'mobile') {
+            return nothing;
+        }
+        /**
+         * Do we have all items of the selectedItem available in the active Item
+         */
+        const selectedInActive = this.selectedItem.reduce((_, item, index) => {
+            if (item === this.activeItem[index]) {
+                return true;
+            }
+            return false;
+        }, false);
+        /**
+         * Determine the data to use for the submenu. This is needed to show the correct selected items in the submenu of the drawer
+         * If all selected Items ar in the active item, show the active item
+         * If the selected item haas no children, but the drawer is open, show the active item
+         * In all the other cases we use the selected item
+         */
+        const selected = selectedInActive || (!this.navigationHasSubmenu[this.selectedItem[0]] && this.drawerOpen)
+            ? this.activeItem
+            : this.selectedItem;
         return html `
       <exm-navigation-sub-menu
         .items=${this.items}
-        .path=${this.activeItem}
+        .path=${selected}
+        ?has-back-button=${!this.railOpen &&
+            (selected.length > 1 || (selected.length > 0 && this.currentSelectedHasChildren(selected)))}
         @sub-menu-item-click=${this.handleSubMenuClick}
       ></exm-navigation-sub-menu>
     `;
@@ -238,7 +302,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     renderRail() {
         return html `<exm-navigation-rail
       .items=${this.items}
-      .selected=${this.selectedItem}
+      .selected=${this.activeItem}
       @rail-item-click=${this.handleRailItemClick}
       @rail-item-mouseenter=${this.handleRailItemMouseEnter}
       @rail-item-mouseleave=${this.handleRailItemMouseLeave}
@@ -256,10 +320,21 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
       <slot name="topbar-actions" slot="topbar-actions"></slot>
     </exm-navigation-topbar>`;
     }
+    /**
+     * If there is an active item, and that item has children, the width of the drawer should be set for desktop.
+     * This will push the content to the right.
+     *
+     * @returns the width of the drawer area
+     */
+    getDrawerWidth() {
+        if (this.media === 'desktop' && this.activeItem.length > 0 && this.navigationHasSubmenu[this.activeItem[0]]) {
+            return this.drawerWidth;
+        }
+        return 0;
+    }
     render() {
-        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`,
+            '--exm-drawer-width': `${this.getDrawerWidth()}px`,
         };
         const containerClass = { 'show-topbar': !this.railOpen };
         return html `
@@ -276,7 +351,6 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
           <slot></slot>
         </section>
       </section>
-      <slot></slot>
     `;
     }
 }
@@ -290,15 +364,15 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'drawer-width' })
 ], ExmNavigationBase.prototype, "drawerWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-navigation' })
+], ExmNavigationBase.prototype, "disableNavigate", 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);
@@ -311,9 +385,6 @@ __decorate([
 __decorate([
     state()
 ], ExmNavigationBase.prototype, "drawerOpen", void 0);
-__decorate([
-    state()
-], ExmNavigationBase.prototype, "drawerHover", void 0);
 __decorate([
     state()
 ], ExmNavigationBase.prototype, "navigationHasSubmenu", void 0);

package/{src → dist}/exm-navigation-drawer-base.js

@@ -33,7 +33,9 @@ export class ExmNavigationDrawerBase extends ExmgElement {
         this.addEventListener('drawer-close', this.handleDrawerClose.bind(this));
     }
     render() {
-        return html `<mwc-drawer type="dismissible" ?open=${this.open}><slot></slot></mwc-drawer>`;
+        return html `<mwc-drawer type="dismissible" ?open=${this.open}>
+      <slot></slot>
+    </mwc-drawer>`;
     }
 }
 ExmNavigationDrawerBase.styles = [style];

package/{src → dist}/exm-navigation-drawer-nav-item-base.js

@@ -6,6 +6,7 @@ import '@material/web/focus/md-focus-ring.js';
 import './exm-navigation-icon.js';
 import '@material/web/list/list.js';
 import '@material/web/list/list-item.js';
+import { classMap } from 'lit/directives/class-map.js';
 export class ExmNavigationDrawerNavItemBase extends LitElement {
     constructor() {
         super(...arguments);
@@ -15,15 +16,18 @@ export class ExmNavigationDrawerNavItemBase extends LitElement {
         this.submenuIcon = 'arrow_forward';
     }
     render() {
-        return html `<md-list-item type="button" ?selected=${this.selected}>
-      ${this.icon
-            ? html `<exm-navigation-icon slot="start" class="item-icon" icon=${this.icon}></exm-navigation-icon>`
+        const classList = { selected: this.selected, 'has-sub-menu': this.hasSubmenu, 'has-icon': !!this.icon };
+        return html `
+      <button class="${classMap(classList)}">
+        ${this.icon ? html `<exm-navigation-icon class="item-icon" icon=${this.icon}></exm-navigation-icon>` : nothing}
+        <span class="label"><slot></slot></span>
+        ${this.hasSubmenu
+            ? html `<exm-navigation-icon class="has-submenu" icon=${this.submenuIcon}></exm-navigation-icon>`
             : nothing}
-      <div class="label"><slot></slot></div>
-      ${this.hasSubmenu
-            ? html `<exm-navigation-icon slot="end" class="has-submenu" icon=${this.submenuIcon}></exm-navigation-icon>`
-            : nothing}
-    </md-list-item>`;
+        <md-ripple part="ripple"></md-ripple>
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
+      </button>
+    `;
     }
 }
 ExmNavigationDrawerNavItemBase.styles = [style];

package/{src → dist}/exm-navigation-icon-button-base.js

@@ -20,6 +20,8 @@ export class ExmNavigationIconButtonBase extends ExmgElement {
       <button class="icon-button ${classMap(buttonClass)}" @click=${this.handleMenuButtonClick}>
         <exm-navigation-icon icon=${this.icon}></exm-navigation-icon>
         ${this.label ? html ` <span class="label">${this.label}</span>` : nothing}
+        <md-ripple part="ripple"></md-ripple>
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
       </button>
     `;
     }

package/{src → dist}/exm-navigation-sub-menu-base.d.ts

@@ -8,10 +8,21 @@ import '@exmg/exm-collapsed/exm-collapsed.js';
 export declare class ExmNavigationSubMenuBase extends ExmgElement {
     items: MenuItem[];
     path: (string | null)[];
+    hasBackButton: boolean;
     currentItem?: MenuItem['items'];
+    static itemIndex: number;
+    navigationElement?: HTMLElement;
     static styles: import("lit").CSSResult[];
     protected updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private handleSubMenuItemClick;
+    /**
+     * If a collapsable menuitem is not selected we can just pass the path.
+     * If it is selected, we remove the item from the path to collapse the menu again
+     */
+    private handleCollapsableSubMenuItemClick;
+    private getItemStyle;
     private renderSubMenu;
     render(): import("lit-html").TemplateResult<1>;
 }