@exmg/exm-navigation 1.1.5 → 1.1.6-alpha.6

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

@@ -139,7 +139,7 @@ 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 && !this.touch) {
                 this.selectedItem = [detail, items[0].id];

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

@@ -33,7 +33,7 @@ export const style = css `
     background-color: var(--background-color);
     position: relative;
     border: none;
-    color: var(--text-color);
+    color: var(--md-sys-color-on-surface, black);
     outline: none;
 
     .label {
@@ -44,6 +44,7 @@ export const style = css `
     &.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);

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

@@ -5,11 +5,11 @@ 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: start;
     padding: 0;
+    color: var(--md-sys-color-on-surface, black);
     position: relative;
     border-radius: 2rem;
     outline: none;

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

@@ -1,26 +1,25 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.5",
+  "version": "1.1.6-alpha.6+6bd75ed",
   "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",
     "@lit-labs/motion": "^1.0.7",
-    "@material/mwc-drawer": "^0.27.0",
     "@material/mwc-top-app-bar-fixed": "^0.27.0",
     "@material/web": "^2.2.0",
     "lit": "^3.0.0",
@@ -46,11 +45,9 @@
     "directory": "packages/exm-navigation"
   },
   "license": "MIT",
-  "scripts": {
-    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
-  },
+  "scripts": {},
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5747be50ecb7c46ed349c74a6e8d66895d835455"
+  "gitHead": "6bd75ed6cd021e92262245509ff472b9c1e76823"
 }

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