@exmg/exm-navigation 1.1.1 → 1.1.3

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e7086831faea0bdfe8628b0de9b7ddcc45174558"
+  "gitHead": "b00599f5b5bfb37b7bd248e612d461db1f2cdb63"
 }

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

@@ -15,6 +15,7 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
     items: MenuItem[];
     path: string[];
     drawerWidth: number;
+    disableNavigate: boolean;
     drawer?: ExmNavigationDrawer;
     navContent?: HTMLDivElement;
     persistent: boolean;
@@ -37,6 +38,7 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      * Set the correct values when the media changes.
      */
     handleMediaTypeChange(): void;
+    private getPathEndpoint;
     loadPage(path: string[]): void;
     /**
      * Handle Rail item click or Drawer sub menu click.

package/src/exm-navigation-base.js

@@ -19,6 +19,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.items = [];
         this.path = ['chat'];
         this.drawerWidth = 319;
+        this.disableNavigate = false;
         this.persistent = true;
         this.selectedItem = [];
         this.activeItem = [];
@@ -61,10 +62,30 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.drawerOpen = this.media === 'desktop' && this.navigationHasSubmenu[this.selectedItem[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 || window.location.href;
+    }
     loadPage(path) {
         this.path = path;
         this.selectedItem = path;
         this.fire('navigation-change', path);
+        if (!this.disableNavigate) {
+            window.history.pushState({}, '', this.getPathEndpoint());
+            window.dispatchEvent(new PopStateEvent('popstate'));
+        }
     }
     /**
      * Handle Rail item click or Drawer sub menu click.
@@ -152,6 +173,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         if ((!this.railOpen || !this.persistent) && !this.currentSelectedHasChildren(detail)) {
             this.drawerOpen = false;
         }
+        this.loadPage(this.selectedItem);
     }
     /**
      * Handle the topbar menu click.
@@ -186,7 +208,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     renderDrawerMenuButton() {
         return !this.railOpen
             ? html `
-          <section>
+          <section class="drawer-menu-button">
             <exm-navigation-icon-button
               icon=${this.drawerOpen ? 'menu_open' : 'menu'}
               @navigation-icon-button-click=${this.handleTopbarMenuClick}
@@ -210,7 +232,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         ></exm-navigation-drawer-menu>`
             : !this.railOpen
                 ? html `
-            <section>
+            <section class="drawer-back-button">
               <exm-navigation-icon-button
                 icon="arrow_back"
                 label="Main menu"
@@ -228,6 +250,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
       <exm-navigation-sub-menu
         .items=${this.items}
         .path=${this.activeItem}
+        ?has-back-button=${!this.railOpen &&
+            (this.activeItem.length > 1 ||
+                (this.activeItem.length > 0 && this.currentSelectedHasChildren(this.activeItem)))}
         @sub-menu-item-click=${this.handleSubMenuClick}
       ></exm-navigation-sub-menu>
     `;
@@ -276,7 +301,6 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
           <slot></slot>
         </section>
       </section>
-      <slot></slot>
     `;
     }
 }
@@ -290,6 +314,9 @@ __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);

package/src/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/exm-navigation-sub-menu-base.d.ts

@@ -8,6 +8,7 @@ import '@exmg/exm-collapsed/exm-collapsed.js';
 export declare class ExmNavigationSubMenuBase extends ExmgElement {
     items: MenuItem[];
     path: (string | null)[];
+    hasBackButton: boolean;
     currentItem?: MenuItem['items'];
     static styles: import("lit").CSSResult[];
     protected updated(changedProperties: PropertyValues): void;

package/src/exm-navigation-sub-menu-base.js

@@ -8,11 +8,13 @@ import './exm-navigation-rail-nav-item.js';
 import './exm-navigation-drawer-nav-item.js';
 import '@material/web/list/list.js';
 import '@exmg/exm-collapsed/exm-collapsed.js';
+import { classMap } from 'lit/directives/class-map.js';
 export class ExmNavigationSubMenuBase extends ExmgElement {
     constructor() {
         super(...arguments);
         this.items = [];
         this.path = [];
+        this.hasBackButton = false;
     }
     updated(changedProperties) {
         var _a;
@@ -56,8 +58,9 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
     `;
     }
     render() {
+        const navClass = { nav: true, 'has-back-button': this.hasBackButton };
         return html `<div class="top"><slot name="top"></slot></div>
-      <nav class="nav">
+      <nav class=${classMap(navClass)}>
         <md-list>
           ${repeat(this.currentItem || [], ({ id }) => id, (item) => (item.items || []).length === 0
             ? html `
@@ -82,6 +85,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], ExmNavigationSubMenuBase.prototype, "path", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-back-button' })
+], ExmNavigationSubMenuBase.prototype, "hasBackButton", void 0);
 __decorate([
     state()
 ], ExmNavigationSubMenuBase.prototype, "currentItem", void 0);

package/src/mixins/media-queries.js

@@ -5,8 +5,8 @@ export const MediaQueries = (superClass) => {
         constructor() {
             super(...arguments);
             this.media = 'desktop';
-            this.mobileMedia = window.matchMedia('(max-width: 400px)');
-            this.tabletMedia = window.matchMedia('(min-width: 401px) and (max-width: 1200px)');
+            this.mobileMedia = window.matchMedia('(max-width: 960px)');
+            this.tabletMedia = window.matchMedia('(min-width: 961px) and (max-width: 1200px)');
             this.desktopMedia = window.matchMedia('(min-width: 1201px)');
         }
         updateMedia(media) {

package/src/styles/exm-navigation-css.js

@@ -6,6 +6,7 @@ export const style = css `
     grid-template-rows: 1fr;
     width: 100%;
     transition: grid-template-columns 0.3s ease;
+    max-height: 100vh;
   }
 
   .navigation-container.show-topbar {
@@ -37,6 +38,7 @@ export const style = css `
   .content {
     grid-area: 1/3/2/4;
     z-index: 1;
+    overflow: scroll;
   }
 
   exm-navigation-drawer {
@@ -52,5 +54,13 @@ export const style = css `
   .left-margin {
     margin-left: 2.5rem;
   }
+
+  .drawer-menu-button {
+    padding: 8px 12px;
+  }
+
+  .drawer-back-button {
+    padding: 8px 12px 0;
+  }
 `;
 //# sourceMappingURL=exm-navigation-css.js.map

package/src/styles/exm-navigation-icon-button-css.js

@@ -1,17 +1,19 @@
 import { css } from 'lit';
 export const style = css `
   .icon-button {
+    display: inline-grid;
+    grid-template-columns: 48px;
     border: none;
     background-color: rgba(0, 0, 0, 0);
     color: #fff;
-    width: 48px;
     height: 48px;
-    display: flex;
     align-items: center;
+    justify-content: center;
+    padding: 0;
   }
 
   .icon-button.has-label {
-    width: auto;
+    grid-template-columns: 48px auto;
   }
 
   .icon-button .label {

package/src/styles/exm-navigation-sub-menu-css.js

@@ -8,6 +8,10 @@ export const style = css `
     --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
   }
 
+  md-list {
+    padding-top: 0;
+  }
+
   md-list-item {
     margin-right: 8px;
     margin-left: 8px;
@@ -31,6 +35,10 @@ export const style = css `
     color: var(--md-sys-color-primary);
   }
 
+  .has-back-button {
+    padding-left: 44px;
+  }
+
   .sub-menu {
     margin-left: 1rem;
   }

package/src/styles/exm-navigation-topbar-css.js

@@ -9,11 +9,12 @@ export const style = css `
     background: var(--_exm-navigation-rail-background-color);
     box-sizing: border-box;
     display: grid;
-    grid-template-columns: var(--_exm-navigation-top-bar-height) 1fr;
+    grid-template-columns: auto 1fr auto;
     height: var(--_exm-navigation-top-bar-height);
-    gap: 8px;
+    gap: 16px;
     justify-content: space-between;
     width: 100%;
+    padding: 8px 12px;
   }
 
   exm-navigation-icon-button {