@exmg/exm-navigation 1.1.9-alpha.0 → 1.1.10-alpha.19

package/README.md

@@ -59,7 +59,9 @@ Some of the components used in the navigation c an be used separately. Please ch
 interface MenuItem {
   id: string;
   label: string;
+  type?: 'separator' | 'default';
   path?: string;
+  additionalPath?: Regexp;
   url?: string;
   icon?: string;
   items?: MenuItem[];

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

@@ -10,6 +10,8 @@ import './exm-navigation-rail.js';
 import './exm-navigation-sub-menu.js';
 import './exm-navigation-drawer-menu.js';
 import './exm-navigation-drawer.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 declare const ExmNavigationBase_base: (new (...args: any[]) => {
     media: "mobile" | "tablet" | "desktop";
     touch: boolean;

package/dist/exm-navigation-base.js

@@ -14,13 +14,15 @@ import './exm-navigation-rail.js';
 import './exm-navigation-sub-menu.js';
 import './exm-navigation-drawer-menu.js';
 import './exm-navigation-drawer.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 // eslint-disable-next-line new-cap
 export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     constructor() {
         super();
         this.items = [];
         this.path = ['chat'];
-        this.drawerWidth = 319;
+        this.drawerWidth = 275;
         this.disableNavigate = false;
         /**
          * The menu item triggered by hovering and entering submenu's
@@ -78,11 +80,15 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
                     path = [];
                 }
                 path[depth] = item.id;
-                if (item.path === window.location.pathname) {
+                if (item.path === window.location.pathname || `${item.path}/` === window.location.pathname) {
+                    finished = true;
+                    break;
+                }
+                if (item.additionalPath && item.additionalPath.test(window.location.pathname)) {
                     finished = true;
                     break;
                 }
-                if ((item.items || []).length > 0) {
+                if (item.items && (item.items || []).length > 0) {
                     checkItems(item.items, depth + 1);
                 }
             }
@@ -91,6 +97,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.path = path;
         this.selectedItem = path;
         this.activeItem = path;
+        this.handleDrawerOpen();
     }
     updated(changedProperties) {
         if (changedProperties.has('media')) {
@@ -109,6 +116,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         if (changedProperties.has('media')) {
             this.handleMediaTypeChange.bind(this)();
         }
+        document.documentElement.style.setProperty('--exm-navigation-submenu-width', `${this.drawerWidth}px`);
         /**
          * Set the start path
          */
@@ -191,7 +199,14 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      */
     handleRailItemClick({ detail }) {
         var _a;
-        if (this.activeItem[0] !== detail || this.media !== 'desktop') {
+        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') {
             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];
@@ -386,7 +401,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     }
     render() {
         const containerStyle = {
-            '--exm-drawer-width': `${this.getDrawerWidth()}px`,
+            '--exm-navigation-submenu-column-width': `${this.getDrawerWidth()}px`,
         };
         const containerClass = { 'show-topbar': !this.railOpen };
         return html `

package/dist/exm-navigation-rail-base.js

@@ -5,6 +5,7 @@ import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { style } from './styles/exm-navigation-rail-css.js';
 import './exm-navigation-rail-nav-item.js';
+import { classMap } from 'lit/directives/class-map.js';
 export class ExmNavigationRailBase extends ExmgElement {
     constructor() {
         super(...arguments);
@@ -25,20 +26,26 @@ export class ExmNavigationRailBase extends ExmgElement {
       <nav class="nav">
         <ul>
           ${repeat(this.items, (item) => {
-            return html `
-              <li>
-                <exm-navigation-rail-nav-item
-                  @click=${() => this.handleRailClick(item.id)}
-                  @mouseenter=${() => this.handleRailMouseEnter(item.id)}
-                  @mouseleave=${() => this.handleRailMouseLeave(item.id)}
-                  label=${item.label}
-                  icon=${item.icon || ''}
-                  ?hasSubMenu=${(item.items || []).length > 0}
-                  itemId=${item.id}
-                  .selected=${this.selected[0] === item.id}
-                ></exm-navigation-rail-nav-item>
-              </li>
-            `;
+            if (item.type === 'separator') {
+                return html ` <li class="rail-separator"></li> `;
+            }
+            else {
+                const classes = { hidden: item.type === 'hidden' };
+                return html `
+                <li class=${classMap(classes)}>
+                  <exm-navigation-rail-nav-item
+                    @click=${() => this.handleRailClick(item.id)}
+                    @mouseenter=${() => this.handleRailMouseEnter(item.id)}
+                    @mouseleave=${() => this.handleRailMouseLeave(item.id)}
+                    label=${item.label}
+                    icon=${item.icon || ''}
+                    ?hasSubMenu=${(item.items || []).length > 0}
+                    itemId=${item.id}
+                    .selected=${this.selected[0] === item.id}
+                  ></exm-navigation-rail-nav-item>
+                </li>
+              `;
+            }
         })}
         </ul>
       </nav>

package/dist/mixins/media-queries.js

@@ -7,8 +7,8 @@ export const MediaQueries = (superClass) => {
             this.media = 'desktop';
             this.touch = false;
             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)');
+            this.tabletMedia = window.matchMedia('(min-width: 961px) and (max-width: 1600px)');
+            this.desktopMedia = window.matchMedia('(min-width: 1601px)');
             this.hoverMedia = window.matchMedia('(hover: hover)');
         }
         updateMedia(media) {

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

@@ -1,8 +1,12 @@
 import { css } from 'lit';
 export const style = css `
+  :host {
+    --_exm-navigation-drawer-shape: var(--exm-navigation-drawer-shape, 1rem);
+  }
+
   .navigation-container {
     display: grid;
-    grid-template-columns: auto var(--exm-drawer-width, 500px) 1fr;
+    grid-template-columns: auto var(--exm-navigation-submenu-column-width, 500px) 1fr;
     grid-template-rows: 1fr;
     width: 100%;
     transition: grid-template-columns 0.3s ease;
@@ -48,7 +52,6 @@ export const style = css `
     --md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
     --md-list-item-container-shape: 24px;
     --mdc-theme-surface: var(--md-sys-color-surface-container-high);
-    --mdc-shape-large: 1rem;
   }
 
   .left-margin {

package/dist/styles/exm-navigation-drawer-css.js

@@ -1,13 +1,10 @@
 import { css } from 'lit';
 export const style = css `
-  :root {
-    --md-sys-color-background: var(--md-sys-color-surface-container-high);
-  }
-
   :host {
-    --exm-drawer-max-width: 319px;
+    --md-sys-color-background: var(--md-sys-color-surface-container-high);
+    --_exm-navigation-submenu-width: var(--exm-navigation-submenu-width);
     display: grid;
-    grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
+    grid-template-columns: var(--_exm-navigation-submenu-width, 300px) 1fr;
     height: 100vh;
     width: 100%;
     box-sizing: border-box;
@@ -17,15 +14,15 @@ export const style = css `
 
   aside {
     position: absolute;
-    left: calc(-1 * var(--exm-drawer-max-width, 300px) - 1px);
-    width: var(--exm-drawer-max-width, 300px);
+    left: calc(-1 * var(--_exm-navigation-submenu-width, 300px) - 1px);
+    width: var(--_exm-navigation-submenu-width, 300px);
     height: 100%;
     transition: left 0.3s ease-out;
     z-index: 4;
     background-color: var(--exm-drawer-container-color, var(--md-sys-color-surface-container, #f3edf7));
-    color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface-container, #f3edf7));
-    border-radius: 0 var(--mdc-shape-large, 0) var(--mdc-shape-large, 0) 0;
-    border-left: 1px solid var(--md-sys-color-outline);
+    color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface, #f3edf7));
+    border-radius: 0 var(--_exm-navigation-drawer-shape, 0) var(--_exm-navigation-drawer-shape, 0) 0;
+    border-left: 1px solid var(--md-sys-color-outline-variant);
 
     &.open {
       left: 0;

package/dist/styles/exm-navigation-rail-css.js

@@ -46,5 +46,14 @@ export const style = css `
     flex-grow: 1;
     justify-content: flex-end;
   }
+
+  .rail-separator {
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    margin: -2px 16px 14px;
+  }
+
+  .hidden {
+    display: none;
+  }
 `;
 //# sourceMappingURL=exm-navigation-rail-css.js.map

package/dist/types.d.ts

@@ -1,7 +1,9 @@
 export interface MenuItem {
     id: string;
     label: string;
+    type?: 'separator' | 'default' | 'hidden';
     path?: string;
+    additionalPath?: RegExp;
     url?: string;
     icon?: string;
     items?: MenuItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.9-alpha.0",
+  "version": "1.1.10-alpha.19+20be399",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,20 +15,17 @@
     "./exm-navigation-icon-button.js": "./dist/exm-navigation-icon-button.js",
     "./exm-navigation-rail.js": "./dist/exm-navigation-rail.js",
     "./exm-navigation-rail-nav-item.js": "./dist/exm-navigation-rail-nav-item.js",
-    "./exm-navigation-topbar.js": "./dist/exm-navigation-topbar.js",
-    "./exm-navigation-base.js": "./dist/ExmNavigationBase.js"
+    "./exm-navigation-topbar.js": "./dist/exm-navigation-topbar.js"
   },
   "dependencies": {
-    "@exmg/lit-base": "^3.0.0",
-    "@lit-labs/motion": "^1.0.7",
-    "@material/mwc-top-app-bar-fixed": "^0.27.0",
+    "@lit-labs/motion": "^1.0.7"
+  },
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
     "@material/web": "^2.2.0",
-    "lit": "^3.0.0",
+    "lit": "^3.2.1",
     "tslib": "^2.6.2"
   },
-  "devDependencies": {
-    "@exmg/lit-cli": "1.1.13"
-  },
   "keywords": [
     "web-components",
     "lit",
@@ -50,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1973df6ecaaf0a57b688f5eb8852516295bc04d6"
+  "gitHead": "20be399892ecc54f71f080f17a677a370d9f2b9c"
 }