@exmg/exm-navigation 1.0.2 → 1.1.0

package/src/styles/exm-navigation-rail-nav-item.scss

@@ -20,14 +20,17 @@
     var(--md-sys-color-on-secondary)
   );
 
+  --_exm-navigation-rail-nav-item-width: var(--exm-navigation-rail-nav-item-width, 80px);
+
   display: flex;
   flex-direction: column;
-  width: 80px;
-  margin: -2px auto 14px;
-  padding: 2px;
+  width: var(--_exm-navigation-rail-nav-item-width);
+  margin: -2px 0 14px;
+  padding: 2px 0;
   vertical-align: baseline;
   align-items: center;
   cursor: pointer;
+  width: 100%;
 }
 
 button {
@@ -43,32 +46,15 @@ button:focus {
 
 .symbols {
   display: flex;
-  text-align: center;
   position: relative;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 32px;
-  margin-right: auto;
-  margin-bottom: 4px;
-  margin-left: auto;
-  font-variation-settings: 'wght' 400, 'opsz' 24;
+  margin: 0 auto 4px;
   transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
   border-radius: 16px;
-}
-
-.symbols {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
+  color: var(--_exm-navigation-rail-nav-item-icon-color);
 }
 
 .symbols:before {
@@ -86,20 +72,19 @@ button:focus {
   z-index: -1;
 }
 
-.symbols {
-  color: var(--_exm-navigation-rail-nav-item-icon-color);
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24;
-}
-
 :host(:hover) .symbols {
   background: var(--_exm-navigation-rail-nav-item-icon-color-hover);
-  font-variation-settings: 'wght' 600, 'opsz' 24;
+  font-variation-settings:
+    'wght' 600,
+    'opsz' 24;
 }
 
 :host([selected]) .symbols {
   background: var(--_exm-navigation-rail-nav-item-icon-color-selected);
   color: var(--_exm-navigation-rail-nav-item-color-selected);
-  font-variation-settings: 'wght' 600, 'opsz' 24;
+  font-variation-settings:
+    'wght' 600,
+    'opsz' 24;
 }
 
 :host([selected]:hover) .symbols {

package/src/styles/exm-navigation-rail.scss

@@ -3,11 +3,9 @@
     --exm-navigation-rail-background-color,
     var(--md-sys-color-surface-container)
   );
+  --_exm-navigation-rail-width: var(--exm-navigation-rail-nav-width, 88px);
 
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
+  display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
@@ -15,6 +13,7 @@
   overflow-y: auto;
   z-index: 8;
   box-sizing: border-box;
+  width: var(--_exm-navigation-rail-width);
 }
 
 @media screen and (min-width: 961px) {
@@ -23,7 +22,17 @@
   }
 }
 
-.nav {
+nav {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    padding: 0;
+    margin: 0;
+  }
   flex: 1;
 }
 

package/src/styles/exm-navigation-sub-menu-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

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

@@ -0,0 +1,4 @@
+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))}md-list-item{margin-right:8px;margin-left:8px;border-radius:1rem;--md-list-item-container-shape: 1rem}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)}.sub-menu{margin-left:1rem}`;
+export default style;
+//# sourceMappingURL=exm-navigation-sub-menu-css.js.map

package/src/styles/exm-navigation-sub-menu.scss

@@ -0,0 +1,34 @@
+: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));
+}
+
+md-list-item {
+  margin-right: 8px;
+  margin-left: 8px;
+  border-radius: 1rem;
+  --md-list-item-container-shape: 1rem;
+}
+
+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);
+}
+
+.sub-menu {
+  margin-left: 1rem;
+}

package/src/styles/exm-navigation-topbar-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{--_exm-navigation-topbar-background-color: var( --exm-navigation-topbar-background-color, var(--md-sys-color-surface-container) );--_exm-navigation-top-bar-height: var(--exm-navigation-top-bar-height, 64px);background:var(--_exm-navigation-rail-background-color);box-sizing:border-box;display:grid;grid-template-columns:var(--_exm-navigation-top-bar-height) 1fr;height:var(--_exm-navigation-top-bar-height);justify-content:space-between;width:100%}exm-navigation-icon-button{align-self:center;grid-area:1/1/2/2;justify-self:center}::slotted(*){align-self:center;grid-area:1/2/2/3;padding:0 8px}`;
+export default style;
+//# sourceMappingURL=exm-navigation-topbar-css.js.map

package/src/styles/exm-navigation-topbar.scss

@@ -0,0 +1,27 @@
+:host {
+  --_exm-navigation-topbar-background-color: var(
+    --exm-navigation-topbar-background-color,
+    var(--md-sys-color-surface-container)
+  );
+  --_exm-navigation-top-bar-height: var(--exm-navigation-top-bar-height, 64px);
+
+  background: var(--_exm-navigation-rail-background-color);
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: var(--_exm-navigation-top-bar-height) 1fr;
+  height: var(--_exm-navigation-top-bar-height);
+  justify-content: space-between;
+  width: 100%;
+}
+
+exm-navigation-icon-button {
+  align-self: center;
+  grid-area: 1/1/2/2;
+  justify-self: center;
+}
+
+::slotted(*) {
+  align-self: center;
+  grid-area: 1/2/2/3;
+  padding: 0 8px;
+}

package/src/styles/exm-navigation.scss

@@ -0,0 +1,52 @@
+.navigation-container {
+  display: grid;
+  grid-template-columns: auto var(--exm-drawer-width, 500px) 1fr;
+  grid-template-rows: 1fr;
+  width: 100%;
+  transition: grid-template-columns 0.3s ease;
+
+  &.show-topbar {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+
+    exm-navigation-topbar {
+      grid-area: 1/1/2/2;
+      z-index: 2;
+    }
+
+    exm-navigation-drawer {
+      grid-area: 1/1/3/2;
+    }
+
+    .content {
+      grid-area: 2/1/3/2;
+    }
+  }
+}
+
+exm-navigation-rail {
+  grid-area: 1/1/2/2;
+}
+
+exm-navigation-drawer {
+  grid-area: 1/2/2/3;
+}
+
+.content {
+  grid-area: 1/3/2/4;
+  z-index: 1;
+}
+
+exm-navigation-drawer {
+  --md-list-container-color: none;
+  --md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);
+  --md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
+  --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 {
+  margin-left: 2.5rem;
+}

package/src/types.d.ts

@@ -0,0 +1,8 @@
+export interface MenuItem {
+    id: string;
+    label: string;
+    path?: string;
+    url?: string;
+    icon?: string;
+    items?: MenuItem[];
+}

package/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.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

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

@@ -1,9 +0,0 @@
-import { ExmNavigationRailNavBase } from './exm-navigation-rail-nav-base.js';
-export declare class ExmNavigationRailNav extends ExmNavigationRailNavBase {
-    static styles: import("lit").CSSResult[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-navigation-rail-nav': ExmNavigationRailNav;
-    }
-}

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

@@ -1,12 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { style } from './styles/exm-navigation-rail-nav-css.js';
-import { ExmNavigationRailNavBase } from './exm-navigation-rail-nav-base.js';
-let ExmNavigationRailNav = class ExmNavigationRailNav extends ExmNavigationRailNavBase {
-};
-ExmNavigationRailNav.styles = [style];
-ExmNavigationRailNav = __decorate([
-    customElement('exm-navigation-rail-nav')
-], ExmNavigationRailNav);
-export { ExmNavigationRailNav };
-//# sourceMappingURL=exm-navigation-rail-nav.js.map

package/src/exm-navigation-signals.js

@@ -1,11 +0,0 @@
-import { signal } from '@lit-labs/preact-signals';
-export const navigationItemHover = signal(false);
-export const navigationDrawerHover = signal(false);
-export const navigationDrawerOpen = signal(false);
-export const navigationActiveHasSubmenu = signal({});
-export const navigationRailSelected = signal(null);
-export const navigationSubSelected = signal(null);
-export const navigationRailActive = signal(null);
-export const navigationRailHidden = signal(false);
-export const navigationDrawerPersistent = signal(false);
-//# sourceMappingURL=exm-navigation-signals.js.map

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

@@ -1,8 +0,0 @@
-import { ExmgElement } from '@exmg/lit-base';
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/icon/icon.js';
-import '@material/mwc-top-app-bar-fixed';
-export declare class ExmNavigationToolbarBase extends ExmgElement {
-    protected firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/src/exm-navigation-toolbar-base.js

@@ -1,33 +0,0 @@
-import { ExmgElement } from '@exmg/lit-base';
-import { html } from 'lit';
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/icon/icon.js';
-import '@material/mwc-top-app-bar-fixed';
-export class ExmNavigationToolbarBase extends ExmgElement {
-    firstUpdated() {
-        const appToolbar = this.shadowRoot.querySelector('mwc-top-app-bar-fixed');
-        if (appToolbar) {
-            const observer = new MutationObserver((_, obs) => {
-                const shadowRoot = appToolbar.shadowRoot;
-                const header = shadowRoot ? shadowRoot.querySelector('header') : null;
-                if (header) {
-                    header.style.left = '0px';
-                    header.style.right = '0px';
-                    obs.disconnect(); // Stop observing once we have made the changes
-                }
-            });
-            observer.observe(appToolbar.shadowRoot, {
-                childList: true,
-                subtree: true,
-            });
-        }
-    }
-    render() {
-        return html `<mwc-top-app-bar-fixed>
-      <slot name="navigationIcon" slot="navigationIcon"></slot>
-      <slot name="title" slot="title"></slot>
-      <slot name="actionItems" slot="actionItems"></slot>
-    </mwc-top-app-bar-fixed>`;
-    }
-}
-//# sourceMappingURL=exm-navigation-toolbar-base.js.map

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

@@ -1,9 +0,0 @@
-import { ExmNavigationToolbarBase } from './exm-navigation-toolbar-base.js';
-export declare class ExmNavigationToolbar extends ExmNavigationToolbarBase {
-    static styles: import("lit").CSSResult[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-navigation-toolbar': ExmNavigationToolbar;
-    }
-}

package/src/exm-navigation-toolbar.js

@@ -1,12 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { style } from './styles/exm-navigation-toolbar-css.js';
-import { ExmNavigationToolbarBase } from './exm-navigation-toolbar-base.js';
-let ExmNavigationToolbar = class ExmNavigationToolbar extends ExmNavigationToolbarBase {
-};
-ExmNavigationToolbar.styles = [style];
-ExmNavigationToolbar = __decorate([
-    customElement('exm-navigation-toolbar')
-], ExmNavigationToolbar);
-export { ExmNavigationToolbar };
-//# sourceMappingURL=exm-navigation-toolbar.js.map

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

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{display:flex;flex-direction:column;--_exm-navigation-rail-nav-width: var(--exm-navigation-rail-nav-width, 88px);width:var(--_exm-navigation-rail-nav-width);margin-top:20px}`;
-export default style;
-//# sourceMappingURL=exm-navigation-rail-nav-css.js.map

package/src/styles/exm-navigation-rail-nav.scss

@@ -1,7 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  --_exm-navigation-rail-nav-width: var(--exm-navigation-rail-nav-width, 88px);
-  width: var(--_exm-navigation-rail-nav-width);
-  margin-top: 20px;
-}

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

@@ -1,4 +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-drawer{--md-list-container-color: none;--md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-container-shape: 24px}exm-navigation-drawer md-list-item{margin-right:8px;margin-left:8px;border-radius:24px;--md-list-item-container-shape: 24px}exm-navigation-drawer 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)}exm-navigation-drawer 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)}exm-navigation-drawer md-list-item[selected] md-icon{color:var(--md-sys-color-primary)}.sub-menu{margin-left:.8rem}.left-margin{margin-left:2.5rem}`;
-export default style;
-//# sourceMappingURL=exm-navigation-styles-css.js.map

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

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{display:block}mwc-top-app-bar-fixed{--mdc-theme-primary: var(--exm-navigation-toolbar-primary, var(--md-sys-color-background));--mdc-theme-on-primary: var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background))}md-icon{fill:var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background))}@media screen and (min-width: 961px){slot[name=navigationIcon]{display:none}}`;
-export default style;
-//# sourceMappingURL=exm-navigation-toolbar-css.js.map

package/src/styles/exm-navigation-toolbar.scss

@@ -1,18 +0,0 @@
-:host {
-  display: block;
-}
-
-mwc-top-app-bar-fixed {
-  --mdc-theme-primary: var(--exm-navigation-toolbar-primary, var(--md-sys-color-background));
-  --mdc-theme-on-primary: var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background));
-}
-
-md-icon {
-  fill: var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background));
-}
-
-@media screen and (min-width: 961px) {
-  slot[name='navigationIcon'] {
-    display: none;
-  }
-}