@exmg/exm-navigation 1.1.4 → 1.1.5-alpha.5

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

@@ -2,12 +2,16 @@ 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';
 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;
@@ -41,6 +45,11 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      */
     navigationHasSubmenu: Record<string, boolean>;
     static styles: import("lit").CSSResult[];
+    constructor();
+    /**
+     * Get the menu items and the current path and set the correct startPath for the navigation
+     */
+    private setPath;
     protected updated(changedProperties: PropertyValues): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     connectedCallback(): void;

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

@@ -6,19 +6,23 @@ 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';
 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(...arguments);
+        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
@@ -41,6 +45,55 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
          * Object with menuitem and a bool for having that path sub items yes or no
          */
         this.navigationHasSubmenu = {};
+        /**
+         * Listen to popState changes. When the event has a state, the browser navigation buttons have been used and we have to update the path
+         */
+        window.addEventListener('popstate', (event) => {
+            if (event.state) {
+                this.setPath();
+            }
+        });
+    }
+    /**
+     * Get the menu items and the current path and set the correct startPath for the navigation
+     */
+    setPath() {
+        let path = [];
+        /**
+         * Set to true if we found the path. This is needed because for breaking out of a recursive function
+         */
+        let finished = false;
+        /**
+         * Loop through the items with a give depth. For every depth level the id of the route is set to that index
+         * If there is a matching path, we set finished to true, so all levels wil break out of their for-loop
+         * Every call done with depth 0 will reset the path, so no artifacts of the previous route will remain
+         *
+         * @param items The items to loop through
+         * @param depth The navigation depth
+         */
+        function checkItems(items, depth = 0) {
+            for (const item of items) {
+                if (finished) {
+                    break;
+                }
+                if (depth === 0) {
+                    path = [];
+                }
+                path[depth] = item.id;
+                if (item.path === window.location.pathname || `${item.path}/` === window.location.pathname) {
+                    finished = true;
+                    break;
+                }
+                if ((item.items || []).length > 0) {
+                    checkItems(item.items, depth + 1);
+                }
+            }
+        }
+        checkItems(this.items);
+        this.path = path;
+        this.selectedItem = path;
+        this.activeItem = path;
+        this.handleDrawerOpen();
     }
     updated(changedProperties) {
         if (changedProperties.has('media')) {
@@ -59,6 +112,11 @@ 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
+         */
+        this.setPath();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -107,9 +165,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * @param param0
      */
     handleDrawerOpen({ mobileForce, tabletForce } = {}) {
-        if (this.media === 'mobile') {
+        if (this.media === 'mobile' || this.touch) {
             // Only triggerable by button
-            if (mobileForce) {
+            if (mobileForce || !this.navigationHasSubmenu[this.activeItem[0]]) {
                 this.drawerOpen = false;
             }
         }
@@ -137,9 +195,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      */
     handleRailItemClick({ detail }) {
         var _a;
-        if (this.activeItem[0] !== detail || this.media === 'mobile') {
+        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 {
@@ -153,6 +211,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * Handle the mouse enter of the rail item.
      */
     handleRailItemMouseEnter({ detail }) {
+        if (this.touch) {
+            return;
+        }
         this.selectedItem = [detail];
         this.handleDrawerOpen();
     }
@@ -185,7 +246,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
             this.loadPage(this.selectedItem);
             mobileForce = true;
         }
-        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch });
+        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint });
     }
     /**
      * Handle the topbar menu click.
@@ -221,9 +282,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         return !this.railOpen
             ? html `
           <section class="drawer-menu-button">
-            <md-icon-button @click=${this.handleTopbarMenuClick}
-              ><md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon></md-icon-button
-            >
+            <md-icon-button @click=${this.handleTopbarMenuClick}>
+              <md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon>
+            </md-icon-button>
           </section>
         `
             : nothing;
@@ -329,7 +390,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/{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

@@ -17,6 +17,11 @@ export declare class ExmNavigationSubMenuBase extends ExmgElement {
     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>;

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

@@ -26,10 +26,8 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        console.log('Conected submenu');
     }
     disconnectedCallback() {
-        console.log('UNConected submenu');
         if (this.navigationElement) {
             this.navigationElement.classList.remove('show');
         }
@@ -38,12 +36,25 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
     handleSubMenuItemClick(path) {
         this.fire('sub-menu-item-click', path);
     }
+    /**
+     * 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
+     */
+    handleCollapsableSubMenuItemClick(path, id, selected) {
+        if (!selected) {
+            this.handleSubMenuItemClick(path);
+            return;
+        }
+        const index = path.findIndex((item) => item === id);
+        this.fire('sub-menu-item-click', path.splice(0, index));
+    }
     getItemStyle() {
         return {
             'grid-area': `${ExmNavigationSubMenuBase.itemIndex}/1/${ExmNavigationSubMenuBase.itemIndex + 1}/2`,
         };
     }
     renderSubMenu(item, path) {
+        const selected = this.path.includes(item.id);
         return html `
       <exm-navigation-drawer-nav-item
         ${animate({
@@ -56,9 +67,9 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
         })}
         style=${styleMap(this.getItemStyle())}
         type="button"
-        ?selected=${this.path.includes(item.id)}
+        ?selected=${selected}
         class="has-submenu ${this.path.includes(item.id) ? 'selected' : ''}"
-        @click=${this.handleSubMenuItemClick.bind(this, [...path])}
+        @click=${this.handleCollapsableSubMenuItemClick.bind(this, [...path], item.id, selected)}
         ?has-submenu=${true}
         submenu-icon=${this.path.includes(item.id) ? 'expand_less' : 'expand_more'}
         >${item.label}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { ExmNavigation } from './exm-navigation.js';
+export { ExmNavigationBase } from './exm-navigation-base.js';
+export { ExmNavigationDrawerBase } from './exm-navigation-drawer-base.js';
+export { ExmNavigationDrawerMenuBase } from './exm-navigation-drawer-menu-base.js';
+export { ExmNavigationDrawerNavItemBase } from './exm-navigation-drawer-nav-item-base.js';
+export { ExmNavigationIconBase } from './exm-navigation-icon-base.js';
+export { ExmNavigationIconButtonBase } from './exm-navigation-icon-button-base.js';
+export { ExmNavigationRailBase } from './exm-navigation-rail-base.js';
+export { ExmNavigationRailNavItemBase } from './exm-navigation-rail-nav-item-base.js';
+export { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
+export { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
+export { style as exmgNavigationStyles } from './styles/exm-navigation-css.js';

package/dist/index.js

@@ -0,0 +1,13 @@
+export { ExmNavigation } from './exm-navigation.js';
+export { ExmNavigationBase } from './exm-navigation-base.js';
+export { ExmNavigationDrawerBase } from './exm-navigation-drawer-base.js';
+export { ExmNavigationDrawerMenuBase } from './exm-navigation-drawer-menu-base.js';
+export { ExmNavigationDrawerNavItemBase } from './exm-navigation-drawer-nav-item-base.js';
+export { ExmNavigationIconBase } from './exm-navigation-icon-base.js';
+export { ExmNavigationIconButtonBase } from './exm-navigation-icon-button-base.js';
+export { ExmNavigationRailBase } from './exm-navigation-rail-base.js';
+export { ExmNavigationRailNavItemBase } from './exm-navigation-rail-nav-item-base.js';
+export { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
+export { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
+export { style as exmgNavigationStyles } from './styles/exm-navigation-css.js';
+//# sourceMappingURL=index.js.map

package/{src → 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/{src → dist}/styles/exm-navigation-css.js

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const style = css `
   .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;
@@ -56,15 +56,17 @@ export const style = css `
   }
 
   .drawer-menu-button {
-    padding: 8px 16px;
+    padding: 0 8px;
     height: var(--_exm-navigation-top-bar-height, 64px);
     box-sizing: border-box;
-    display: flex;
+    display: grid;
+    grid-template-columns: 48px 1fr;
     align-items: center;
+    justify-items: center;
   }
 
   .drawer-back-button {
-    padding: 8px 12px 0;
+    padding: 0 8px;
   }
 `;
 //# sourceMappingURL=exm-navigation-css.js.map

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

@@ -0,0 +1,32 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    --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(--_exm-navigation-submenu-width, 300px) 1fr;
+    height: 100vh;
+    width: 100%;
+    box-sizing: border-box;
+    transition: grid-template-columns 0.3s ease;
+    position: relative;
+  }
+
+  aside {
+    position: absolute;
+    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);
+
+    &.open {
+      left: 0;
+    }
+  }
+`;
+//# sourceMappingURL=exm-navigation-drawer-css.js.map

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

@@ -0,0 +1,84 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    --_exm-navigation-item-background-color-selected: var(
+      --exm-navigation-item-background-color-selected,
+      var(--md-sys-color-secondary)
+    );
+    --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
+    --_exm-navigation-item-color-sub-selected: var(
+      --exm-navigation-item-color-sub-selected,
+      var(--md-sys-color-on-surface)
+    );
+    --_exm-navigation-item-background-color-sub-selected: var(
+      --exm-navigation-item-background-color-sub-selected,
+      var(--md-sys-color-surface-container-highest)
+    );
+    --md-list-item-container-shape: 2rem;
+    --md-list-item-one-line-container-height: 48px;
+  }
+
+  button {
+    --background-color: transparent;
+    --text-color: var(--md-list-item-label-text-color);
+
+    border-radius: var(--md-list-item-container-shape);
+    height: var(--md-list-item-one-line-container-height);
+    font-size: 16px;
+    padding: 0 16px;
+    display: grid;
+    align-items: center;
+    width: 100%;
+    grid-template-columns: auto 1fr auto;
+    background-color: var(--background-color);
+    position: relative;
+    border: none;
+    color: var(--md-sys-color-on-surface, black);
+    outline: none;
+
+    .label {
+      grid-area: 1/2/2/3;
+      text-align: start;
+    }
+
+    &.selected {
+      --background-color: var(--_exm-navigation-item-background-color-selected);
+      --text-color: var(--_exm-navigation-item-color-selected);
+      color: var(--text-color, black);
+
+      &.has-sub-menu {
+        --background-color: var(--_exm-navigation-item-background-color-sub-selected);
+        --text-color: var(--_exm-navigation-item-color-sub-selected);
+      }
+    }
+
+    &.has-icon {
+      padding-left: 4px;
+    }
+
+    &.has-sub-menu {
+      padding-right: 4px;
+    }
+
+    & + button {
+      margin-top: 4px;
+    }
+
+    md-focus-ring {
+      color: white;
+    }
+
+    exm-navigation-icon {
+      width: 48px;
+
+      &.item-icon {
+        grid-area: 1/1/2/2;
+      }
+
+      &.has-submenu {
+        grid-area: 1/3/2/4;
+      }
+    }
+  }
+`;
+//# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map

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

@@ -5,15 +5,19 @@ export const style = css `
     grid-template-columns: 48px;
     border: none;
     background-color: rgba(0, 0, 0, 0);
-    color: #fff;
     height: 48px;
     align-items: center;
-    justify-content: center;
+    justify-content: start;
     padding: 0;
+    color: var(--md-sys-color-on-surface, black);
+    position: relative;
+    border-radius: 2rem;
+    outline: none;
   }
 
   .icon-button.has-label {
     grid-template-columns: 48px auto;
+    width: 100%;
   }
 
   .icon-button .label {

package/{src → dist}/styles/exm-navigation-rail-css.js

@@ -16,6 +16,7 @@ export const style = css `
     z-index: 8;
     box-sizing: border-box;
     width: var(--_exm-navigation-rail-width);
+    scrollbar-width: none;
   }
 
   @media screen and (min-width: 961px) {

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

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+export const style = css `
+  .nav {
+    padding: 8px;
+  }
+
+  md-list {
+    padding-top: 0;
+    display: grid;
+    grid-template-rows: repeat(auto-fit, auto);
+  }
+
+  .has-back-button {
+    padding-left: 48px;
+  }
+
+  .sub-menu {
+    margin-left: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-navigation-sub-menu-css.js.map

package/package.json

@@ -1,34 +1,31 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.4",
+  "version": "1.1.5-alpha.5+569284b",
   "type": "module",
-  "main": "index.js",
-  "module": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
   "exports": {
-    ".": "./index.js",
-    "./exm-navigation.js": "./src/exm-navigation.js",
-    "./exm-navigation-drawer.js": "./src/exm-navigation-drawer.js",
-    "./exm-navigation-drawer-menu.js": "./src/exm-navigation-drawer-menu.js",
-    "./exm-navigation-drawer-nav-item.js": "./src/exm-navigation-drawer-nav-item.js",
-    "./exm-navigation-icon.js": "./src/exm-navigation-icon.js",
-    "./exm-navigation-icon-button.js": "./src/exm-navigation-icon-button.js",
-    "./exm-navigation-rail.js": "./src/exm-navigation-rail.js",
-    "./exm-navigation-rail-nav-item.js": "./src/exm-navigation-rail-nav-item.js",
-    "./exm-navigation-topbar.js": "./src/exm-navigation-topbar.js",
-    "./exm-navigation-base.js": "./src/ExmNavigationBase.js"
+    ".": "./dist/index.js",
+    "./exm-navigation.js": "./dist/exm-navigation.js",
+    "./exm-navigation-drawer.js": "./dist/exm-navigation-drawer.js",
+    "./exm-navigation-drawer-menu.js": "./dist/exm-navigation-drawer-menu.js",
+    "./exm-navigation-drawer-nav-item.js": "./dist/exm-navigation-drawer-nav-item.js",
+    "./exm-navigation-icon.js": "./dist/exm-navigation-icon.js",
+    "./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"
   },
   "dependencies": {
-    "@exmg/lit-base": "^3.0.0",
-    "@lit-labs/motion": "^1.0.7",
-    "@material/mwc-drawer": "^0.27.0",
-    "@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",
@@ -39,18 +36,16 @@
     "**/*.js",
     "**/*.d.ts"
   ],
-  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "homepage": "https://bitbucket.org/exmachina/exm-web-components",
   "repository": {
     "type": "git",
-    "url": "git@github.com:exmg/exm-web-components.git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
     "directory": "packages/exm-navigation"
   },
   "license": "MIT",
-  "scripts": {
-    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
-  },
+  "scripts": {},
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b7a2332237126f8df4b270b2685a45265c684cc0"
+  "gitHead": "569284b73ae26df21846b0673aae5a14af49d594"
 }

package/index.d.ts

@@ -1,12 +0,0 @@
-export { ExmNavigation } from './src/exm-navigation.js';
-export { ExmNavigationBase } from './src/exm-navigation-base.js';
-export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
-export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
-export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
-export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
-export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
-export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
-export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
-export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
-export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
-export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';

package/index.js

@@ -1,13 +0,0 @@
-export { ExmNavigation } from './src/exm-navigation.js';
-export { ExmNavigationBase } from './src/exm-navigation-base.js';
-export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
-export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
-export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
-export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
-export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
-export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
-export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
-export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
-export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
-export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';
-//# sourceMappingURL=index.js.map

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

@@ -1,24 +0,0 @@
-import { css } from 'lit';
-export const style = css `
-  :root {
-    --md-sys-color-background: var(--md-sys-color-surface-container-high);
-  }
-
-  :host {
-    --mdc-drawer-width: 319px;
-    display: grid;
-    grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
-    height: 100vh;
-    width: 100%;
-    box-sizing: border-box;
-    transition: grid-template-columns 0.3s ease;
-    position: relative;
-  }
-
-  @media screen and (min-width: 961px) {
-    slot[name='appContent'] {
-      background-color: rgba(0, 0, 0, 0);
-    }
-  }
-`;
-//# sourceMappingURL=exm-navigation-drawer-css.js.map

package/src/styles/exm-navigation-drawer-nav-item-css.js

@@ -1,55 +0,0 @@
-import { css } from 'lit';
-export const style = css `
-  :host {
-    --_exm-navigation-item-background-color-selected: var(
-      --exm-navigation-item-background-color-selected,
-      var(--md-sys-color-secondary)
-    );
-    --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
-    --_exm-navigation-item-color-sub-selected: var(
-      --exm-navigation-item-color-sub-selected,
-      var(--md-sys-color-on-surface)
-    );
-    --_exm-navigation-item-background-color-sub-selected: var(
-      --exm-navigation-item-background-color-sub-selected,
-      var(--md-sys-color-surface-container-highest)
-    );
-  }
-
-  md-list-item {
-    margin-right: 8px;
-    margin-left: 8px;
-    border-radius: 2rem;
-    --md-list-item-container-shape: 2rem;
-    --md-list-item-one-line-container-height: 48px;
-  }
-
-  md-list-item[selected] {
-    --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
-    background-color: var(--_exm-navigation-item-background-color-selected);
-    --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected)
-      --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
-    --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected)
-      --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
-  }
-
-  :host(.has-submenu) {
-    md-list-item[selected] {
-      background-color: var(--_exm-navigation-item-background-color-sub-selected);
-      --md-list-item-label-text-color: var(--_exm-navigation-item-color-sub-selected);
-    }
-  }
-  md-list-item.collapsed-item[selected] {
-    --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
-    background-color: var(--_exm-navigation-item-background-color-selected);
-  }
-
-  md-list-item[selected] md-icon {
-    color: var(--md-sys-color-primary);
-  }
-
-  .sub-menu {
-    margin-left: 1rem;
-  }
-`;
-//# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map

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

@@ -1,53 +0,0 @@
-import { css } from 'lit';
-export const style = css `
-  :host {
-    --_exm-navigation-item-background-color-selected: var(
-      --exm-navigation-item-background-color-selected,
-      var(--md-sys-color-secondary)
-    );
-    --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
-  }
-
-  .nav {
-    padding-top: 4px;
-  }
-
-  md-list {
-    padding-top: 0;
-    display: grid;
-    grid-template-rows: repeat(auto-fit, auto);
-  }
-
-  md-list-item {
-    margin-right: 8px;
-    margin-left: 8px;
-    border-radius: 2rem;
-    --md-list-item-container-shape: 2rem;
-    --md-list-item-one-line-container-height: 48px;
-  }
-
-  md-list-item[selected] {
-    --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
-    background-color: var(--_exm-navigation-item-background-color-selected);
-    --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected);
-    --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
-  }
-
-  md-list-item.collapsed-item[selected] {
-    --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
-    background-color: var(--_exm-navigation-item-background-color-selected);
-  }
-
-  md-list-item[selected] md-icon {
-    color: var(--md-sys-color-primary);
-  }
-
-  .has-back-button {
-    padding-left: 44px;
-  }
-
-  .sub-menu {
-    margin-left: 1rem;
-  }
-`;
-//# sourceMappingURL=exm-navigation-sub-menu-css.js.map