@exmg/exm-navigation 1.0.3 → 1.1.1-alpha.9

package/dist/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/dist/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/dist/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/dist/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/dist/exm-navigation-drawer-nav-item-base.js

@@ -0,0 +1,49 @@
+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';
+import { classMap } from 'lit/directives/class-map.js';
+export class ExmNavigationDrawerNavItemBase extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.icon = '';
+        this.selected = false;
+        this.hasSubmenu = false;
+        this.submenuIcon = 'arrow_forward';
+    }
+    render() {
+        const classList = { selected: this.selected, 'has-sub-menu': this.hasSubmenu, 'has-icon': !!this.icon };
+        return html `
+      <button class="${classMap(classList)}">
+        ${this.icon ? html `<exm-navigation-icon class="item-icon" icon=${this.icon}></exm-navigation-icon>` : nothing}
+        <span class="label"><slot></slot></span>
+        ${this.hasSubmenu
+            ? html `<exm-navigation-icon class="has-submenu" icon=${this.submenuIcon}></exm-navigation-icon>`
+            : nothing}
+        <md-ripple part="ripple"></md-ripple>
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
+      </button>
+    `;
+    }
+}
+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/dist/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/dist/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 → dist}/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 → dist}/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/dist/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/dist/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/dist/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/dist/exm-navigation-icon-button-base.js

@@ -0,0 +1,36 @@
+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}
+        <md-ripple part="ripple"></md-ripple>
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
+      </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/dist/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/dist/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/dist/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/dist/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/dist/exm-navigation-rail-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';
+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/dist/exm-navigation-rail-base.js

@@ -0,0 +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="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 → dist}/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/dist/exm-navigation-rail-nav-item-base.js

@@ -0,0 +1,37 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { style } from './styles/exm-navigation-rail-nav-item-css.js';
+import '@material/web/focus/md-focus-ring.js';
+import './exm-navigation-icon.js';
+export class ExmNavigationRailNavItemBase extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.icon = '';
+        this.selected = false;
+        this.hasSubMenu = false;
+    }
+    render() {
+        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);
+__decorate([
+    property({ type: String })
+], ExmNavigationRailNavItemBase.prototype, "itemId", void 0);
+__decorate([
+    property({ type: String })
+], ExmNavigationRailNavItemBase.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmNavigationRailNavItemBase.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmNavigationRailNavItemBase.prototype, "hasSubMenu", void 0);
+//# sourceMappingURL=exm-navigation-rail-nav-item-base.js.map

package/{src → dist}/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 → dist}/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 → dist}/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 → dist}/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/dist/exm-navigation-sub-menu-base.d.ts

@@ -0,0 +1,28 @@
+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)[];
+    hasBackButton: boolean;
+    currentItem?: MenuItem['items'];
+    static itemIndex: number;
+    navigationElement?: HTMLElement;
+    static styles: import("lit").CSSResult[];
+    protected updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleSubMenuItemClick;
+    /**
+     * 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
+     */
+    private handleCollapsableSubMenuItemClick;
+    private getItemStyle;
+    private renderSubMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}

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/dist/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;
+    }
+}