@exmg/exm-navigation 1.1.29 → 1.1.31

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

@@ -21,6 +21,8 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
     path: string[];
     drawerWidth: number;
     disableNavigate: boolean;
+    hoverDisabled: boolean;
+    collapseOnDesktop: boolean;
     drawer?: ExmNavigationDrawer;
     navContent?: HTMLDivElement;
     /**
@@ -63,7 +65,7 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      * Handles the drawer state. If it should be open yes or no.
      * @param param0
      */
-    handleDrawerOpen({ mobileForce, tabletForce }?: Record<string, boolean>): void;
+    handleDrawerOpen({ mobileForce, tabletForce, desktopForce }?: 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).
@@ -99,6 +101,7 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      * This should reset the active item, so the root-level menu gets triggered
      */
     private handleDrawerBackClick;
+    private handleContentPointerDown;
     /**
      * Check if the passed paths last item has children yes or no
      * @param path Path array

package/dist/exm-navigation-base.js

@@ -24,6 +24,8 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.path = ['chat'];
         this.drawerWidth = 275;
         this.disableNavigate = false;
+        this.hoverDisabled = false;
+        this.collapseOnDesktop = 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
@@ -166,10 +168,12 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * Handles the drawer state. If it should be open yes or no.
      * @param param0
      */
-    handleDrawerOpen({ mobileForce, tabletForce } = {}) {
+    handleDrawerOpen({ mobileForce, tabletForce, desktopForce } = {}) {
+        const hasActiveSubmenu = this.navigationHasSubmenu[this.activeItem[0]];
+        const hasSelectedSubmenu = this.navigationHasSubmenu[this.selectedItem[0]];
         if (this.media === 'mobile' || this.touch) {
             // Only triggerable by button
-            if (mobileForce || !this.navigationHasSubmenu[this.activeItem[0]]) {
+            if (mobileForce || !hasActiveSubmenu) {
                 this.drawerOpen = false;
             }
         }
@@ -178,15 +182,19 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
                 this.drawerOpen = false;
             }
             else {
-                this.drawerOpen = this.navigationHasSubmenu[this.selectedItem[0]];
+                this.drawerOpen = hasSelectedSubmenu;
             }
         }
         if (this.media === 'desktop') {
+            if (desktopForce) {
+                this.drawerOpen = false;
+                return;
+            }
             if (this.navigationHasSubmenu[this.activeItem[0]]) {
                 this.drawerOpen = true;
             }
             else {
-                this.drawerOpen = this.navigationHasSubmenu[this.selectedItem[0]];
+                this.drawerOpen = hasSelectedSubmenu;
             }
         }
     }
@@ -197,14 +205,24 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      */
     handleRailItemClick({ detail }) {
         var _a;
+        const isSameItem = this.activeItem[0] === detail;
+        if (this.hoverDisabled) {
+            if (isSameItem && this.drawerOpen && this.collapseOnDesktop) {
+                this.drawerOpen = false;
+            }
+            else {
+                this.selectedItem = [detail];
+                this.loadPage(this.selectedItem);
+                this.handleDrawerOpen();
+            }
+            return;
+        }
         const item = this.items.find((item) => item.id === this.activeItem[0]);
         /**
          * If this is the current item, skip it.
          * If it is the current one and we have an additional path, handle the click to be able to go to the path's destination
          */
-        if (this.activeItem[0] !== detail ||
-            (this.activeItem[0] === detail && (item === null || item === void 0 ? void 0 : item.additionalPath)) ||
-            this.media !== 'desktop') {
+        if (!isSameItem || (this.activeItem[0] === detail && (item === null || item === void 0 ? void 0 : item.additionalPath)) || this.media !== 'desktop') {
             const items = ((_a = this.items.find((item) => item.id === detail)) === null || _a === void 0 ? void 0 : _a.items) || [];
             if (items.length && !this.touch) {
                 this.selectedItem = [detail, items[0].id];
@@ -220,7 +238,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * Handle the mouse enter of the rail item.
      */
     handleRailItemMouseEnter({ detail }) {
-        if (this.touch) {
+        if (this.touch || this.hoverDisabled) {
             return;
         }
         this.selectedItem = [detail];
@@ -239,6 +257,14 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
          * 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
          */
+        if (this.hoverDisabled) {
+            return;
+        }
+        if (this.media === 'desktop' && this.collapseOnDesktop) {
+            this.selectedItem = this.activeItem;
+            this.drawerOpen = false;
+            return;
+        }
         this.selectedItem = this.activeItem;
         this.handleDrawerOpen({ tabletForce: true });
     }
@@ -251,11 +277,15 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.selectedItem = detail;
         const endPoint = this.getPathEndpoint();
         let mobileForce = false;
+        let desktopForce = false;
         if (endPoint) {
             this.loadPage(this.selectedItem);
             mobileForce = true;
+            if (this.collapseOnDesktop) {
+                desktopForce = true;
+            }
         }
-        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint });
+        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint, desktopForce });
     }
     /**
      * Handle the topbar menu click.
@@ -271,6 +301,13 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     handleDrawerBackClick() {
         this.selectedItem = [];
     }
+    // Close the drawer whenever the content area is interacted with
+    handleContentPointerDown() {
+        if (!this.drawerOpen || (this.media === 'desktop' && !this.collapseOnDesktop))
+            return;
+        this.selectedItem = this.activeItem;
+        this.drawerOpen = false;
+    }
     /**
      * Check if the passed paths last item has children yes or no
      * @param path Path array
@@ -392,7 +429,14 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * @returns the width of the drawer area
      */
     getDrawerWidth() {
-        if (this.media === 'desktop' && this.activeItem.length > 0 && this.navigationHasSubmenu[this.activeItem[0]]) {
+        if (this.media !== 'desktop' || !this.drawerOpen) {
+            return 0;
+        }
+        const activeItem = this.activeItem[0];
+        const selectedItem = this.selectedItem[0];
+        const activeHasChildren = !!activeItem && this.navigationHasSubmenu[activeItem];
+        const selectedHasChildren = !!selectedItem && this.navigationHasSubmenu[selectedItem];
+        if (activeHasChildren || selectedHasChildren) {
             return this.drawerWidth;
         }
         return 0;
@@ -412,7 +456,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         <exm-navigation-drawer ?open=${this.drawerOpen} @drawer-mouseleave=${this.handleDrawerMouseLeave}>
           ${[this.renderDrawerMenuButton(), this.renderStartMenu(), this.renderDrawerSubMenu()]}
         </exm-navigation-drawer>
-        <section class="content">
+        <section class="content" @pointerdown=${this.handleContentPointerDown}>
           <slot></slot>
         </section>
       </section>
@@ -432,6 +476,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'disable-navigation' })
 ], ExmNavigationBase.prototype, "disableNavigate", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hover-disabled' })
+], ExmNavigationBase.prototype, "hoverDisabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'collapse-on-desktop' })
+], ExmNavigationBase.prototype, "collapseOnDesktop", void 0);
 __decorate([
     query('exm-navigation-drawer')
 ], ExmNavigationBase.prototype, "drawer", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.29",
+  "version": "1.1.31",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4f87060160e9545bc7190a0f5e1e47a311933e9c"
+  "gitHead": "ce33f79e394b6a6635b74a6551032880aebfdf5e"
 }