@exmg/exm-navigation 1.0.3 → 1.1.1

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-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>
-      <div class="bottom"><slot name="bottom"></slot></div>`;
+        return html `<div class="rail-top"><slot name="rail-top"></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="rail-bottom"><slot name="rail-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>;
 }

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

@@ -1,48 +1,24 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { navigationItemHover, navigationRailActive, navigationActiveHasSubmenu } from './exm-navigation-signals.js';
+import { style } from './styles/exm-navigation-rail-nav-item-css.js';
 import '@material/web/focus/md-focus-ring.js';
-import { observer } from '@exmg/lit-base';
+import './exm-navigation-icon.js';
 export class ExmNavigationRailNavItemBase extends LitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.icon = '';
         this.selected = false;
         this.hasSubMenu = false;
-        // eslint-disable-next-line
-        this.setAttribute('role', 'link');
-        // Bind methods to ensure the correct 'this' context
-        this.hoverIn = this.hoverIn.bind(this);
-        this.hoverOut = this.hoverOut.bind(this);
-        // Add event listeners in the constructor
-        this.addEventListener('mouseenter', this.hoverIn);
-        this.addEventListener('mouseleave', this.hoverOut);
-    }
-    deselectOtherOptions(id) {
-        for (const key in navigationActiveHasSubmenu.value) {
-            // eslint-disable-next-line
-            if (navigationActiveHasSubmenu.value.hasOwnProperty(key) && key !== id) {
-                navigationActiveHasSubmenu.value[key] = false;
-            }
-        }
-    }
-    hoverIn() {
-        if (this.hasSubMenu) {
-            navigationItemHover.value = true;
-            navigationRailActive.value = this.itemId;
-        }
-    }
-    hoverOut() {
-        navigationItemHover.value = false;
     }
     render() {
-        return html ` <button>
-      <md-focus-ring></md-focus-ring><span class="symbols">${this.icon}</span>
+        return html `<button role="link">
+      <md-focus-ring></md-focus-ring><exm-navigation-icon class="symbols" icon=${this.icon}></exm-navigation-icon>
       <div class="label">${this.label}</div>
     </button>`;
     }
 }
+ExmNavigationRailNavItemBase.styles = [style];
 __decorate([
     property({ type: String })
 ], ExmNavigationRailNavItemBase.prototype, "icon", void 0);
@@ -53,15 +29,7 @@ __decorate([
     property({ type: String })
 ], ExmNavigationRailNavItemBase.prototype, "label", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    observer(function (value) {
-        if (this.itemId) {
-            navigationActiveHasSubmenu.value[this.itemId] = value && this.hasSubMenu;
-            if (navigationActiveHasSubmenu.value[this.itemId] && value) {
-                this.deselectOtherOptions(this.itemId);
-            }
-        }
-    })
+    property({ type: Boolean, reflect: true })
 ], ExmNavigationRailNavItemBase.prototype, "selected", void 0);
 __decorate([
     property({ type: Boolean })

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

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

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

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

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

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

package/src/exm-navigation-rail.js

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

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

@@ -0,0 +1,17 @@
+import { PropertyValues } from 'lit';
+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 ExmNavigationSubMenuBase extends ExmgElement {
+    items: MenuItem[];
+    path: (string | null)[];
+    currentItem?: MenuItem['items'];
+    static styles: import("lit").CSSResult[];
+    protected updated(changedProperties: PropertyValues): void;
+    private handleSubMenuItemClick;
+    private renderSubMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,88 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { style } from './styles/exm-navigation-sub-menu-css.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 ExmNavigationSubMenuBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.path = [];
+    }
+    updated(changedProperties) {
+        var _a;
+        if (changedProperties.has('path') || changedProperties.has('items')) {
+            console.log('updated', this.path);
+            this.currentItem = ((_a = this.items.find((item) => item.id === this.path[0])) === null || _a === void 0 ? void 0 : _a.items) || [];
+        }
+    }
+    handleSubMenuItemClick(path) {
+        this.fire('sub-menu-item-click', path);
+    }
+    renderSubMenu(item, path) {
+        return html `
+      <exm-navigation-drawer-nav-item
+        type="button"
+        ?selected=${this.path.includes(item.id)}
+        class="has-submenu"
+        @click=${this.handleSubMenuItemClick.bind(this, [...path])}
+        ?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) => (subItem.items || []).length === 0
+            ? html `
+                    <exm-navigation-drawer-nav-item
+                      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() {
+        return html `<div class="top"><slot name="top"></slot></div>
+      <nav class="nav">
+        <md-list>
+          ${repeat(this.currentItem || [], ({ id }) => id, (item) => (item.items || []).length === 0
+            ? html `
+                    <exm-navigation-drawer-nav-item
+                      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.styles = [style];
+__decorate([
+    property({ type: Array })
+], ExmNavigationSubMenuBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], ExmNavigationSubMenuBase.prototype, "path", void 0);
+__decorate([
+    state()
+], ExmNavigationSubMenuBase.prototype, "currentItem", void 0);
+//# sourceMappingURL=exm-navigation-sub-menu-base.js.map

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

@@ -0,0 +1,8 @@
+import { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
+export declare class ExmNavigationSubMenu extends ExmNavigationSubMenuBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation-sub-menu': ExmNavigationSubMenu;
+    }
+}

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

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

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

@@ -0,0 +1,10 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { MenuItem } from './types.js';
+import './exm-navigation-rail-nav-item.js';
+export declare class ExmNavigationTopbarBase extends ExmgElement {
+    items: MenuItem[];
+    drawerOpen: boolean;
+    static styles: import("lit").CSSResult[];
+    handleMenuButtonClick(itemId: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,34 @@
+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-topbar-css.js';
+import './exm-navigation-rail-nav-item.js';
+export class ExmNavigationTopbarBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.drawerOpen = false;
+    }
+    handleMenuButtonClick(itemId) {
+        this.fire('topbar-menu-click', itemId);
+    }
+    render() {
+        return html `
+      <exm-navigation-icon-button
+        icon=${this.drawerOpen ? 'menu_open' : 'menu'}
+        @navigation-icon-button-click=${this.handleMenuButtonClick}
+      ></exm-navigation-icon-button>
+      <slot name="topbar-title" class="topbar-title"></slot>
+      <slot name="topbar-actions"></slot>
+    `;
+    }
+}
+ExmNavigationTopbarBase.styles = [style];
+__decorate([
+    property({ type: Array })
+], ExmNavigationTopbarBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'drawer-open' })
+], ExmNavigationTopbarBase.prototype, "drawerOpen", void 0);
+//# sourceMappingURL=exm-navigation-topbar-base.js.map

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

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

package/src/exm-navigation-topbar.js

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