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

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

@@ -0,0 +1,153 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property, query, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { style } from './styles/exm-navigation-sub-menu-css.js';
+import { animate, fadeOut, fadeIn } from '@lit-labs/motion';
+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';
+import { styleMap } from 'lit/directives/style-map.js';
+export class ExmNavigationSubMenuBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.path = [];
+        this.hasBackButton = false;
+    }
+    updated(changedProperties) {
+        var _a;
+        if (changedProperties.has('path') || changedProperties.has('items')) {
+            this.currentItem = ((_a = this.items.find((item) => item.id === this.path[0])) === null || _a === void 0 ? void 0 : _a.items) || [];
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        if (this.navigationElement) {
+            this.navigationElement.classList.remove('show');
+        }
+        super.disconnectedCallback();
+    }
+    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({
+            keyframeOptions: {
+                duration: 300,
+            },
+            out: fadeOut,
+            in: fadeIn,
+            properties: ['opacity'],
+        })}
+        style=${styleMap(this.getItemStyle())}
+        type="button"
+        ?selected=${selected}
+        class="has-submenu ${this.path.includes(item.id) ? 'selected' : ''}"
+        @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}
+      </exm-navigation-drawer-nav-item>
+      <exm-collapsed id="collapsed" ?opened=${this.path.includes(item.id)}>
+        <div class="sub-menu">
+          <md-list>
+            <!-- Need to check for multiple items -->
+            ${(item.items || []).map((subItem) => {
+            ExmNavigationSubMenuBase.itemIndex += 1;
+            return (subItem.items || []).length === 0
+                ? html `
+                    <exm-navigation-drawer-nav-item
+                      style=${styleMap(this.getItemStyle())}
+                      class="collapsed-item"
+                      ?selected=${this.path.includes(subItem.id)}
+                      @click=${this.handleSubMenuItemClick.bind(this, [...path, subItem.id])}
+                    >
+                      ${subItem.label}
+                    </exm-navigation-drawer-nav-item>
+                  `
+                : this.renderSubMenu(item, [this.path[0] || '', item.id]);
+        })}
+          </md-list>
+        </div>
+      </exm-collapsed>
+    `;
+    }
+    render() {
+        const navClass = { nav: true, 'has-back-button': this.hasBackButton };
+        ExmNavigationSubMenuBase.itemIndex = 0;
+        return html `<div class="top"><slot name="top"></slot></div>
+      <nav id="exm-navigation-sub-menu" class=${classMap(navClass)}>
+        <md-list>
+          ${repeat(this.currentItem || [], ({ id }) => id, (item) => {
+            ExmNavigationSubMenuBase.itemIndex += 1;
+            return (item.items || []).length === 0
+                ? html `
+                    <exm-navigation-drawer-nav-item
+                      ${animate({
+                    keyframeOptions: {
+                        duration: 300,
+                    },
+                    stabilizeOut: true,
+                    out: fadeOut,
+                    in: fadeIn,
+                    properties: ['opacity'],
+                })}
+                      style="${styleMap(this.getItemStyle())}"
+                      type="button"
+                      ?selected=${this.path.includes(item.id)}
+                      @click=${this.handleSubMenuItemClick.bind(this, [this.path[0] || '', item.id])}
+                    >
+                      ${item.label}
+                    </exm-navigation-drawer-nav-item>
+                  `
+                : this.renderSubMenu(item, [this.path[0] || '', item.id]);
+        })}
+        </md-list>
+      </nav>
+      <div class="bottom"><slot name="bottom"></slot></div>`;
+    }
+}
+ExmNavigationSubMenuBase.itemIndex = 0;
+ExmNavigationSubMenuBase.styles = [style];
+__decorate([
+    property({ type: Array })
+], ExmNavigationSubMenuBase.prototype, "items", void 0);
+__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);
+__decorate([
+    query('nav')
+], ExmNavigationSubMenuBase.prototype, "navigationElement", void 0);
+//# sourceMappingURL=exm-navigation-sub-menu-base.js.map

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

@@ -15,10 +15,9 @@ export class ExmNavigationTopbarBase extends ExmgElement {
     }
     render() {
         return html `
-      <exm-navigation-icon-button
-        icon=${this.drawerOpen ? 'menu_open' : 'menu'}
-        @navigation-icon-button-click=${this.handleMenuButtonClick}
-      ></exm-navigation-icon-button>
+      <md-icon-button @click=${this.handleMenuButtonClick}
+        ><md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon></md-icon-button
+      >
       <slot name="topbar-title" class="topbar-title"></slot>
       <slot name="topbar-actions"></slot>
     `;

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.d.ts

@@ -3,5 +3,6 @@ type Constructor<T = {}> = new (...args: any[]) => T;
 type MediaType = 'mobile' | 'tablet' | 'desktop';
 export declare const MediaQueries: <T extends Constructor<LitElement>>(superClass: T) => Constructor<{
     media: MediaType;
+    touch: boolean;
 }> & T;
 export {};

package/{src → dist}/mixins/media-queries.js

@@ -5,9 +5,11 @@ 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.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.hoverMedia = window.matchMedia('(hover: hover)');
         }
         updateMedia(media) {
             return (mediaMatch) => {
@@ -17,6 +19,12 @@ export const MediaQueries = (superClass) => {
                 }
             };
         }
+        updateTouch() {
+            return (mediaMatch) => {
+                this.touch = !mediaMatch.matches;
+                this.requestUpdate();
+            };
+        }
         connectedCallback() {
             super.connectedCallback();
             // @ts-ignore
@@ -25,10 +33,12 @@ export const MediaQueries = (superClass) => {
             this.updateMedia('tablet')(this.tabletMedia);
             // @ts-ignore
             this.updateMedia('desktop')(this.desktopMedia);
-            // eslint-disable-next-line
+            // @ts-ignore
+            this.updateTouch()(this.hoverMedia);
             this.mobileMedia.addEventListener('change', this.updateMedia('mobile').bind(this));
             this.tabletMedia.addEventListener('change', this.updateMedia('tablet').bind(this));
             this.desktopMedia.addEventListener('change', this.updateMedia('desktop').bind(this));
+            this.hoverMedia.addEventListener('change', this.updateTouch().bind(this));
         }
         updated(changedProperties) {
             var _a;
@@ -39,6 +49,9 @@ export const MediaQueries = (superClass) => {
     __decorate([
         property({ type: String })
     ], MediaQueryClass.prototype, "media", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], MediaQueryClass.prototype, "touch", void 0);
     return MediaQueryClass;
 };
 //# sourceMappingURL=media-queries.js.map

package/{src → dist}/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,19 @@ export const style = css `
   .left-margin {
     margin-left: 2.5rem;
   }
+
+  .drawer-menu-button {
+    padding: 0 8px;
+    height: var(--_exm-navigation-top-bar-height, 64px);
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    justify-items: center;
+  }
+
+  .drawer-back-button {
+    padding: 0 8px;
+  }
 `;
 //# sourceMappingURL=exm-navigation-css.js.map

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

@@ -0,0 +1,35 @@
+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;
+    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;
+  }
+
+  aside {
+    position: absolute;
+    left: -300px;
+    width: var(--exm-drawer-max-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/dist/styles/exm-navigation-icon-button-css.js

@@ -0,0 +1,29 @@
+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);
+    height: 48px;
+    align-items: 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 {
+    padding: 0 8px;
+    white-space: nowrap;
+    font-size: 16px;
+  }
+`;
+//# sourceMappingURL=exm-navigation-icon-button-css.js.map

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

@@ -9,14 +9,15 @@ 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 {
+  md-icon-button {
     align-self: center;
     grid-area: 1/1/2/2;
     justify-self: center;

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.1",
+  "version": "1.1.2-alpha.2+b22c94c",
   "type": "module",
-  "main": "index.js",
-  "module": "index.js",
+  "main": "dist/index.js",
+  "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",
+    "./exm-navigation-base.js": "./dist/ExmNavigationBase.js"
   },
   "dependencies": {
     "@exmg/lit-base": "^3.0.0",
-    "@material/mwc-drawer": "^0.27.0",
+    "@lit-labs/motion": "^1.0.7",
     "@material/mwc-top-app-bar-fixed": "^0.27.0",
     "@material/web": "^2.2.0",
     "lit": "^3.0.0",
@@ -38,18 +38,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": "e7086831faea0bdfe8628b0de9b7ddcc45174558"
+  "gitHead": "b22c94c314417991814f6ce678ef9559dfe96e7d"
 }

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/exm-navigation-drawer-nav.d.ts

@@ -1,9 +0,0 @@
-import '@material/web/list/list.js';
-import '@material/web/list/list-item.js';
-import { ExmgElement } from '@exmg/lit-base';
-declare const ExmNavigationDrawerNav_base: typeof ExmgElement;
-export declare class ExmNavigationDrawerNav extends ExmNavigationDrawerNav_base {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-export {};

package/src/exm-navigation-drawer-nav.js

@@ -1,47 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { navigationRailHidden, navigationRailActive } from './exm-navigation-signals.js';
-import { SignalWatcher } from '@lit-labs/preact-signals';
-import '@material/web/list/list.js';
-import '@material/web/list/list-item.js';
-import { ExmgElement } from '@exmg/lit-base';
-let ExmNavigationDrawerNav = class ExmNavigationDrawerNav extends SignalWatcher(ExmgElement) {
-    render() {
-        return navigationRailHidden.value
-            ? html `<div class="nav">
-          <div class="header">
-            <md-icon-button @click=${() => this.fire('drawer-close', null, true)}
-              ><md-icon>menu_open</md-icon></md-icon-button
-            >
-          </div>
-          <div class="navigation">
-            ${navigationRailActive.value === null
-                ? html `<div class="nav top-level"><slot name="topLevel"></slot></div>`
-                : html `<div class="nav"><slot name="navTop"></slot><slot></slot></div>`}
-          </div>
-        </div>`
-            : html `<slot></slot>`;
-    }
-};
-ExmNavigationDrawerNav.styles = [
-    css `
-      :host {
-        display: block;
-      }
-
-      .nav {
-        margin: 8px 0 auto;
-      }
-
-      .header md-icon-button {
-        margin: 4px 12px 8px 16px;
-      }
-    `,
-];
-ExmNavigationDrawerNav = __decorate([
-    customElement('exm-navigation-drawer-nav')
-    // eslint-disable-next-line
-], ExmNavigationDrawerNav);
-export { ExmNavigationDrawerNav };
-//# sourceMappingURL=exm-navigation-drawer-nav.js.map

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

@@ -1,4 +0,0 @@
-import { LitElement } from 'lit';
-export declare class ExmNavigationRailNavBase extends LitElement {
-    render(): import("lit-html").TemplateResult<1>;
-}

package/src/exm-navigation-rail-nav-base.js

@@ -1,9 +0,0 @@
-import { LitElement, html } from 'lit';
-export class ExmNavigationRailNavBase extends LitElement {
-    render() {
-        return html `<nav aria-label="Main">
-      <slot></slot>
-    </nav>`;
-    }
-}
-//# sourceMappingURL=exm-navigation-rail-nav-base.js.map