@exmg/exm-navigation 1.0.3 → 1.1.0

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

@@ -1,173 +1,49 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+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 { ResizeController } from '@lit-labs/observers/resize-controller.js';
-import { navigationDrawerHover, navigationItemHover, navigationDrawerOpen, navigationRailHidden, navigationDrawerPersistent, navigationActiveHasSubmenu, } from './exm-navigation-signals.js';
-import { SignalWatcher } from '@lit-labs/preact-signals';
-import { observer } from '@exmg/lit-base';
-// eslint-disable-next-line
-export class ExmNavigationDrawerBase extends SignalWatcher(LitElement) {
-    hasActiveSubmenu() {
-        let activeHasSubMenu = false;
-        for (const key in navigationActiveHasSubmenu.value) {
-            // eslint-disable-next-line
-            if (navigationActiveHasSubmenu.value.hasOwnProperty(key) && navigationActiveHasSubmenu.value[key]) {
-                activeHasSubMenu = true;
-            }
-        }
-        return activeHasSubMenu;
-    }
-    updateInlineStyles() {
-        const drawer = this.drawer;
-        if (drawer) {
-            const shadowRoot = drawer.shadowRoot;
-            const asideElement = shadowRoot.querySelector('aside');
-            if (asideElement) {
-                asideElement.style.left = navigationRailHidden.value ? '0px' : 'var(--_exm-navigation-rail-nav-width)';
-            }
-            const contentElement = shadowRoot.querySelector('div.mdc-drawer-app-content');
-            if (contentElement) {
-                // @ts-ignore
-                contentElement.style.marginLeft = navigationRailHidden.value
-                    ? '0px'
-                    : this.open
-                        ? 'var(--mdc-drawer-width, 256px)'
-                        : '0px';
-            }
-        }
-    }
+export class ExmNavigationDrawerBase extends ExmgElement {
     constructor() {
-        super();
+        super(...arguments);
         this.open = false;
         this.persistent = false;
-        this._itemHover = false;
-        this._drawerHover = false;
-        // @ts-ignore
-        this._observer = new ResizeController(this, {
-            target: window.document.body,
-            callback: (entries) => {
-                const entry = entries.pop();
-                if (!entry || !entry.contentRect)
-                    return;
-                const width = entry.contentRect.width;
-                const persistentWidth = width > 1560;
-                const activeHasSubMenu = this.hasActiveSubmenu();
-                // If root nav item set and has submenu and persistent width meets the criteria
-                const persistent = activeHasSubMenu && persistentWidth;
-                if (this.persistent !== persistent) {
-                    if (!persistent) {
-                        this.open = false;
-                    }
-                    else {
-                        this.open = true;
-                    }
-                    this.persistent = persistent;
-                }
-                navigationRailHidden.value = width < 961;
-                this.updateInlineStyles();
-            },
-        });
-        // Bind methods to ensure the correct 'this' context
-        this.hoverIn = this._hoverIn.bind(this);
-        this.hoverOut = this._hoverOut.bind(this);
-        this.handleClose = this._handleClose.bind(this);
-    }
-    disconnectedCallback() {
-        // Clean up listeners
-        this._asideElement.removeEventListener('mouseenter', this.hoverIn);
-        this._asideElement.removeEventListener('mouseleave', this.hoverOut);
-        this.removeEventListener('drawer-close', this.handleClose);
-    }
-    toggle() {
-        this.open = !this.open;
-    }
-    _handleClose() {
-        this.open = false;
     }
-    _hoverIn() {
-        navigationDrawerHover.value = true;
+    handleMouseEnter() {
+        this.fire('drawer-mouseenter');
     }
-    _hoverOut() {
-        navigationDrawerHover.value = false;
+    handleMouseLeave() {
+        this.fire('drawer-mouseleave');
     }
-    hidemenu() {
-        // Hide submenu when drawer is not persistent when mouse leaves the drawer or menu items
-        if (!this._itemHover && !this._drawerHover && !(this.persistent && this.hasActiveSubmenu())) {
-            this.open = false;
-        }
-    }
-    updated() {
-        if (this._itemHover !== navigationItemHover.value) {
-            this._itemHover = navigationItemHover.value;
-            if (this._itemHover) {
-                this.open = true;
-            }
-            if (!this._itemHover) {
-                // Timeout to allow for mouse transition to the content element
-                setTimeout(this.hidemenu.bind(this), 100);
-            }
-            else {
-                this.hidemenu();
-            }
-        }
-        if (this._drawerHover !== navigationDrawerHover.value) {
-            this._drawerHover = navigationDrawerHover.value;
-            this.hidemenu();
-        }
+    handleDrawerClose() {
+        this.fire('drawer-mouseleave');
     }
     async firstUpdated() {
+        var _a;
         await this.updateComplete;
-        const drawer = this.drawer;
-        if (drawer) {
-            const shadowRoot = drawer.shadowRoot;
-            if (shadowRoot) {
-                const asideElement = shadowRoot.querySelector('aside');
-                if (asideElement) {
-                    // Hack custom styles in the aside element
-                    asideElement.style.borderRightWidth = '0px';
-                    asideElement.style.borderRadius = '0px 16px 16px 0px';
-                    asideElement.style.top = '0px';
-                    asideElement.style.bottom = '0px';
-                    asideElement.style.height = 'unset';
-                    asideElement.style.transitionProperty = 'transform, box-shadow';
-                    asideElement.style.transitionDuration = '300ms';
-                    asideElement.style.transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
-                    asideElement.style.background = `var(--md-sys-color-surface-container)`;
-                    asideElement.style.borderLeft = '1px solid var(--md-sys-color-outline-variant)';
-                    asideElement.style.left = 'var(--_exm-navigation-rail-nav-width)';
-                    // Add event listeners to the aside element
-                    asideElement.addEventListener('mouseenter', this.hoverIn);
-                    asideElement.addEventListener('mouseleave', this.hoverOut);
-                    this._asideElement = asideElement;
-                }
+        if ((_a = this.drawer) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
+            const asideElement = this.drawer.shadowRoot.querySelector('aside');
+            if (asideElement) {
+                // Add event listeners to the aside element
+                asideElement.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+                asideElement.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
             }
         }
-        this.addEventListener('drawer-close', this.handleClose);
+        this.addEventListener('drawer-close', this.handleDrawerClose.bind(this));
     }
     render() {
-        return html `<mwc-drawer type="dismissible" ?open=${this.open}>
-      <div class="content">
-        <slot></slot>
-      </div>
-      <slot name="appContent" slot="appContent"></slot>
-    </mwc-drawer>`;
+        return html `<mwc-drawer type="dismissible" ?open=${this.open}><slot></slot></mwc-drawer>`;
     }
 }
+ExmNavigationDrawerBase.styles = [style];
 __decorate([
-    property({ type: Boolean }),
-    observer(function (value) {
-        navigationDrawerOpen.value = value;
-        this.updateInlineStyles();
-    })
+    property({ type: Boolean })
 ], ExmNavigationDrawerBase.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmNavigationDrawerBase.prototype, "persistent", void 0);
 __decorate([
     query('mwc-drawer')
 ], ExmNavigationDrawerBase.prototype, "drawer", void 0);
-__decorate([
-    property({ type: Boolean }),
-    observer(function (value) {
-        navigationDrawerPersistent.value = value;
-    })
-], ExmNavigationDrawerBase.prototype, "persistent", void 0);
 //# sourceMappingURL=exm-navigation-drawer-base.js.map

package/src/exm-navigation-drawer-menu-base.d.ts

@@ -0,0 +1,12 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { MenuItem } from './types.js';
+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';
+export declare class ExmNavigationDrawerMenuBase extends ExmgElement {
+    items: MenuItem[];
+    path: string[];
+    private handleDrawerMenuItemClick;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-navigation-drawer-menu-base.js

@@ -0,0 +1,45 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+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';
+export class ExmNavigationDrawerMenuBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.path = [];
+    }
+    handleDrawerMenuItemClick(path) {
+        this.fire('drawer-menu-item-click', path);
+    }
+    render() {
+        return html `<div class="top"><slot name="top"></slot></div>
+      <nav class="nav">
+        <md-list>
+          ${repeat(this.items || [], ({ id }) => id, (item) => html `
+              <exm-navigation-drawer-nav-item
+                type="button"
+                @click=${this.handleDrawerMenuItemClick.bind(this, item.id)}
+                ?has-submenu=${(item.items || []).length > 0}
+                ?selected=${item.id === this.path[0]}
+                icon=${item.icon || ''}
+              >
+                ${item.label}
+              </exm-navigation-drawer-nav-item>
+            `)}
+        </md-list>
+      </nav>
+      <div class="bottom"><slot name="bottom"></slot></div>`;
+    }
+}
+__decorate([
+    property({ type: Array })
+], ExmNavigationDrawerMenuBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], ExmNavigationDrawerMenuBase.prototype, "path", void 0);
+//# sourceMappingURL=exm-navigation-drawer-menu-base.js.map

package/src/exm-navigation-drawer-menu.d.ts

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

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

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

package/src/exm-navigation-drawer-nav-item-base.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+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';
+export declare class ExmNavigationDrawerNavItemBase extends LitElement {
+    icon: string;
+    itemId?: string;
+    selected: boolean;
+    hasSubmenu: boolean;
+    submenuIcon: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,45 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { style } from './styles/exm-navigation-drawer-nav-item-css.js';
+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';
+export class ExmNavigationDrawerNavItemBase extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.icon = '';
+        this.selected = false;
+        this.hasSubmenu = false;
+        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>`
+            : 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>`;
+    }
+}
+ExmNavigationDrawerNavItemBase.styles = [style];
+__decorate([
+    property({ type: String })
+], ExmNavigationDrawerNavItemBase.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], ExmNavigationDrawerNavItemBase.prototype, "itemId", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmNavigationDrawerNavItemBase.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-submenu' })
+], ExmNavigationDrawerNavItemBase.prototype, "hasSubmenu", void 0);
+__decorate([
+    property({ type: String, attribute: 'submenu-icon' })
+], ExmNavigationDrawerNavItemBase.prototype, "submenuIcon", void 0);
+//# sourceMappingURL=exm-navigation-drawer-nav-item-base.js.map

package/src/exm-navigation-drawer-nav-item.d.ts

@@ -0,0 +1,8 @@
+import { ExmNavigationDrawerNavItemBase } from './exm-navigation-drawer-nav-item-base.js';
+export declare class ExmNavigationDrawerNavItem extends ExmNavigationDrawerNavItemBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation-drawer-nav-item': ExmNavigationDrawerNavItem;
+    }
+}

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

@@ -0,0 +1,10 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { ExmNavigationDrawerNavItemBase } from './exm-navigation-drawer-nav-item-base.js';
+let ExmNavigationDrawerNavItem = class ExmNavigationDrawerNavItem extends ExmNavigationDrawerNavItemBase {
+};
+ExmNavigationDrawerNavItem = __decorate([
+    customElement('exm-navigation-drawer-nav-item')
+], ExmNavigationDrawerNavItem);
+export { ExmNavigationDrawerNavItem };
+//# sourceMappingURL=exm-navigation-drawer-nav-item.js.map

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

@@ -1,6 +1,5 @@
 import { ExmNavigationDrawerBase } from './exm-navigation-drawer-base.js';
 export declare class ExmNavigationDrawer extends ExmNavigationDrawerBase {
-    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/exm-navigation-drawer.js

@@ -1,10 +1,8 @@
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { ExmNavigationDrawerBase } from './exm-navigation-drawer-base.js';
-import { style } from './styles/exm-navigation-drawer-css.js';
 let ExmNavigationDrawer = class ExmNavigationDrawer extends ExmNavigationDrawerBase {
 };
-ExmNavigationDrawer.styles = [style];
 ExmNavigationDrawer = __decorate([
     customElement('exm-navigation-drawer')
 ], ExmNavigationDrawer);

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

@@ -0,0 +1,7 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import './styles/exm-navigation-icon-css.js';
+export declare class ExmNavigationIconBase extends ExmgElement {
+    icon: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,20 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+import { style } from './styles/exm-navigation-icon-css.js';
+import './styles/exm-navigation-icon-css.js';
+export class ExmNavigationIconBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.icon = 'menu';
+    }
+    render() {
+        return html `<span class="icon">${this.icon}</span>`;
+    }
+}
+ExmNavigationIconBase.styles = [style];
+__decorate([
+    property({ type: String })
+], ExmNavigationIconBase.prototype, "icon", void 0);
+//# sourceMappingURL=exm-navigation-icon-base.js.map

package/src/exm-navigation-icon-button-base.d.ts

@@ -0,0 +1,9 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import './exm-navigation-icon.js';
+export declare class ExmNavigationIconButtonBase extends ExmgElement {
+    icon: string;
+    label: string;
+    static styles: import("lit").CSSResult[];
+    private handleMenuButtonClick;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-navigation-icon-button-base.js

@@ -0,0 +1,34 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { style } from './styles/exm-navigation-icon-button-css.js';
+import './exm-navigation-icon.js';
+export class ExmNavigationIconButtonBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.icon = 'menu';
+        this.label = '';
+    }
+    handleMenuButtonClick(itemId) {
+        this.fire('navigation-icon-button-click', itemId);
+    }
+    render() {
+        const buttonClass = { 'has-label': !!this.label };
+        return html `
+      <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}
+      </button>
+    `;
+    }
+}
+ExmNavigationIconButtonBase.styles = [style];
+__decorate([
+    property({ type: String })
+], ExmNavigationIconButtonBase.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], ExmNavigationIconButtonBase.prototype, "label", void 0);
+//# sourceMappingURL=exm-navigation-icon-button-base.js.map

package/src/exm-navigation-icon-button.d.ts

@@ -0,0 +1,8 @@
+import { ExmNavigationIconButtonBase } from './exm-navigation-icon-button-base.js';
+export declare class ExmNavigationIconButton extends ExmNavigationIconButtonBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation-icon-button': ExmNavigationIconButton;
+    }
+}

package/src/exm-navigation-icon-button.js

@@ -0,0 +1,10 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { ExmNavigationIconButtonBase } from './exm-navigation-icon-button-base.js';
+let ExmNavigationIconButton = class ExmNavigationIconButton extends ExmNavigationIconButtonBase {
+};
+ExmNavigationIconButton = __decorate([
+    customElement('exm-navigation-icon-button')
+], ExmNavigationIconButton);
+export { ExmNavigationIconButton };
+//# sourceMappingURL=exm-navigation-icon-button.js.map

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

@@ -0,0 +1,8 @@
+import { ExmNavigationIconBase } from './exm-navigation-icon-base.js';
+export declare class ExmNavigationIcon extends ExmNavigationIconBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation-icon': ExmNavigationIcon;
+    }
+}

package/src/exm-navigation-icon.js

@@ -0,0 +1,10 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { ExmNavigationIconBase } from './exm-navigation-icon-base.js';
+let ExmNavigationIcon = class ExmNavigationIcon extends ExmNavigationIconBase {
+};
+ExmNavigationIcon = __decorate([
+    customElement('exm-navigation-icon')
+], ExmNavigationIcon);
+export { ExmNavigationIcon };
+//# sourceMappingURL=exm-navigation-icon.js.map

package/src/exm-navigation-menu-button-base.d.ts

@@ -0,0 +1,7 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import './exm-navigation-rail-nav-item.js';
+export declare class ExmNavigationMenuButtonBase extends ExmgElement {
+    open: boolean;
+    handleMenuButtonClick(itemId: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-navigation-menu-button.d.ts

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

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

@@ -1,4 +1,12 @@
 import { ExmgElement } from '@exmg/lit-base/index.js';
+import { MenuItem } from './types.js';
+import './exm-navigation-rail-nav-item.js';
 export declare class ExmNavigationRailBase extends ExmgElement {
+    items: MenuItem[];
+    selected: string[];
+    static styles: import("lit").CSSResult[];
+    private handleRailClick;
+    private handleRailMouseEnter;
+    private handleRailMouseLeave;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,10 +1,55 @@
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { ExmgElement } from '@exmg/lit-base/index.js';
+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';
 export class ExmNavigationRailBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.selected = [];
+    }
+    handleRailClick(itemId) {
+        this.fire('rail-item-click', itemId);
+    }
+    handleRailMouseEnter(itemId) {
+        this.fire('rail-item-mouseenter', itemId);
+    }
+    handleRailMouseLeave(itemId) {
+        this.fire('rail-item-mouseleave', itemId);
+    }
     render() {
         return html `<div class="top"><slot name="top"></slot></div>
-      <div class="nav"><slot></slot></div>
+      <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>
+            `;
+        })}
+        </ul>
+      </nav>
       <div class="bottom"><slot name="bottom"></slot></div>`;
     }
 }
+ExmNavigationRailBase.styles = [style];
+__decorate([
+    property({ type: Array })
+], ExmNavigationRailBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], ExmNavigationRailBase.prototype, "selected", void 0);
 //# sourceMappingURL=exm-navigation-rail-base.js.map

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

@@ -1,14 +1,12 @@
 import { LitElement } from 'lit';
 import '@material/web/focus/md-focus-ring.js';
+import './exm-navigation-icon.js';
 export declare class ExmNavigationRailNavItemBase extends LitElement {
     icon: string;
     itemId?: string;
     label?: string;
     selected: boolean;
     hasSubMenu: boolean;
-    constructor();
-    deselectOtherOptions(id: string): void;
-    hoverIn(): void;
-    hoverOut(): void;
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }