@exmg/exm-navigation 1.1.2 → 1.1.4-alpha.2

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,6 +12,7 @@ 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[];
@@ -18,32 +21,46 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
     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;
+    private handleMediaTypeChange;
     private getPathEndpoint;
-    loadPage(path: string[]): void;
+    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;
     /**
@@ -102,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';
@@ -20,16 +22,27 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.path = ['chat'];
         this.drawerWidth = 319;
         this.disableNavigate = false;
-        this.persistent = true;
+        /**
+         * 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')) {
@@ -39,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;
             }
         }
@@ -58,8 +71,7 @@ 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() {
@@ -68,7 +80,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         const checkItems = (path, last) => {
             const item = items.find((item) => item.id === path);
             if (last) {
-                return (item === null || item === void 0 ? void 0 : item.path) || '/';
+                return item === null || item === void 0 ? void 0 : item.path;
             }
             items = (item === null || item === void 0 ? void 0 : item.items) || [];
             return;
@@ -76,90 +88,94 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         for (let i = 0; i < this.selectedItem.length; i++) {
             result = checkItems(this.selectedItem[i], i === this.selectedItem.length - 1);
         }
-        return result || window.location.href;
+        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 !== 'desktop') {
             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
@@ -168,11 +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.loadPage(this.selectedItem);
+        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint });
     }
     /**
      * Handle the topbar menu click.
@@ -186,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
@@ -208,10 +226,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         return !this.railOpen
             ? html `
           <section class="drawer-menu-button">
-            <exm-navigation-icon-button
-              icon=${this.drawerOpen ? 'menu_open' : 'menu'}
-              @navigation-icon-button-click=${this.handleTopbarMenuClick}
-            ></exm-navigation-icon-button>
+            <md-icon-button @click=${this.handleTopbarMenuClick}>
+              <md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon>
+            </md-icon-button>
           </section>
         `
             : nothing;
@@ -221,37 +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 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>
-          `
-                : 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 &&
-            (this.activeItem.length > 1 ||
-                (this.activeItem.length > 0 && this.currentSelectedHasChildren(this.activeItem)))}
+            (selected.length > 1 || (selected.length > 0 && this.currentSelectedHasChildren(selected)))}
         @sub-menu-item-click=${this.handleSubMenuClick}
       ></exm-navigation-sub-menu>
     `;
@@ -262,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}
@@ -280,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 `
@@ -322,9 +373,6 @@ __decorate([
 __decorate([
     query('#navigation-container')
 ], ExmNavigationBase.prototype, "navContent", void 0);
-__decorate([
-    state()
-], ExmNavigationBase.prototype, "persistent", void 0);
 __decorate([
     state()
 ], ExmNavigationBase.prototype, "selectedItem", void 0);
@@ -337,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.d.ts

@@ -1,14 +1,11 @@
-import { Drawer } from '@material/mwc-drawer';
 import { ExmgElement } from '@exmg/lit-base';
-import '@material/mwc-drawer';
 export declare class ExmNavigationDrawerBase extends ExmgElement {
     open: boolean;
     persistent: boolean;
-    drawer?: Drawer;
+    drawer?: HTMLDivElement;
     static styles: import("lit").CSSResult[];
     private handleMouseEnter;
     private handleMouseLeave;
-    private handleDrawerClose;
     protected firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ExmgElement } from '@exmg/lit-base';
 import { style } from './styles/exm-navigation-drawer-css.js';
-import '@material/mwc-drawer';
+import { classMap } from 'lit/directives/class-map.js';
 export class ExmNavigationDrawerBase extends ExmgElement {
     constructor() {
         super(...arguments);
@@ -16,9 +16,6 @@ export class ExmNavigationDrawerBase extends ExmgElement {
     handleMouseLeave() {
         this.fire('drawer-mouseleave');
     }
-    handleDrawerClose() {
-        this.fire('drawer-mouseleave');
-    }
     async firstUpdated() {
         var _a;
         await this.updateComplete;
@@ -30,12 +27,16 @@ export class ExmNavigationDrawerBase extends ExmgElement {
                 asideElement.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
             }
         }
-        this.addEventListener('drawer-close', this.handleDrawerClose.bind(this));
     }
     render() {
-        return html `<mwc-drawer type="dismissible" ?open=${this.open}>
+        const classNames = { open: this.open };
+        return html `<aside
+      class="${classMap(classNames)}"
+      @mouseenter=${this.handleMouseEnter}
+      @mouseleave=${this.handleMouseLeave}
+    >
       <slot></slot>
-    </mwc-drawer>`;
+    </aside> `;
     }
 }
 ExmNavigationDrawerBase.styles = [style];
@@ -46,6 +47,6 @@ __decorate([
     property({ type: Boolean })
 ], ExmNavigationDrawerBase.prototype, "persistent", void 0);
 __decorate([
-    query('mwc-drawer')
+    query('aside')
 ], ExmNavigationDrawerBase.prototype, "drawer", void 0);
 //# sourceMappingURL=exm-navigation-drawer-base.js.map

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

@@ -10,9 +10,19 @@ export declare class ExmNavigationSubMenuBase extends ExmgElement {
     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>;
 }