@exmg/exm-navigation 1.1.1 → 1.1.2-alpha.2

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.d.ts

@@ -1,11 +0,0 @@
-export declare const navigationItemHover: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationDrawerHover: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationDrawerOpen: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationActiveHasSubmenu: import("@preact/signals-core").Signal<{
-    [k: string]: boolean;
-}>;
-export declare const navigationRailSelected: import("@preact/signals-core").Signal<string | null>;
-export declare const navigationSubSelected: import("@preact/signals-core").Signal<string | null>;
-export declare const navigationRailActive: import("@preact/signals-core").Signal<string | null>;
-export declare const navigationRailHidden: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationDrawerPersistent: import("@preact/signals-core").Signal<boolean>;

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-sub-menu-base.js

@@ -1,88 +0,0 @@
-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-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-navigate-drawer-nav-item-css.d.ts

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

package/src/styles/exm-navigate-drawer-nav-item-css.js

@@ -1,40 +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));
-  }
-
-  md-list-item {
-    margin-right: 8px;
-    margin-left: 8px;
-    border-radius: 1rem;
-    --md-list-item-container-shape: 1rem;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-  }
-
-  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;
-  }
-`;
-//# sourceMappingURL=exm-navigate-drawer-nav-item-css.js.map

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

@@ -1,24 +0,0 @@
-import { css } from 'lit';
-export const style = css `
-  :root {
-    --md-sys-color-background: var(--md-sys-color-surface-container-high);
-  }
-
-  :host {
-    --mdc-drawer-width: 319px;
-    display: grid;
-    grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
-    height: 100vh;
-    width: 100%;
-    box-sizing: border-box;
-    transition: grid-template-columns 0.3s ease;
-    position: relative;
-  }
-
-  @media screen and (min-width: 961px) {
-    slot[name='appContent'] {
-      background-color: rgba(0, 0, 0, 0);
-    }
-  }
-`;
-//# sourceMappingURL=exm-navigation-drawer-css.js.map

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

@@ -1,40 +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));
-  }
-
-  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-trailing-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;
-  }
-`;
-//# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map

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

@@ -1,23 +0,0 @@
-import { css } from 'lit';
-export const style = css `
-  .icon-button {
-    border: none;
-    background-color: rgba(0, 0, 0, 0);
-    color: #fff;
-    width: 48px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-  }
-
-  .icon-button.has-label {
-    width: auto;
-  }
-
-  .icon-button .label {
-    padding: 0 8px;
-    white-space: nowrap;
-    font-size: 16px;
-  }
-`;
-//# sourceMappingURL=exm-navigation-icon-button-css.js.map

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

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

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-styles-css.d.ts

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

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-sub-menu-css.js

@@ -1,38 +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));
-  }
-
-  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;
-  }
-`;
-//# sourceMappingURL=exm-navigation-sub-menu-css.js.map

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

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

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