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

package/README.md

@@ -0,0 +1,73 @@
+# `<exm-navigation>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-navigation.svg)](https://www.npmjs.com/package/@exmg/exm-navigation)
+
+# @exmg/exm-navigation
+
+## Install
+
+```bash
+npm install @exmg/exm-navigation
+```
+
+## Anatomy
+
+This library contains following component:
+
+1. Navigation (main component and fully composed navigation component)
+
+Conceptual usage:
+
+```html
+  <exm-navigation .items=${menuItems} .path=${['spaces']}>
+    <!-- Slot for adding a title to the topbar. Topbar is only visible on mobile -->
+    <section slot="topbar-title">My Title</section>
+    <!-- Slot for adding actions to the right of the topbar. Topbar is only visible on mobile -->
+    <section slot="topbar-actions">Actions</section>
+    <!-- Slot for adding a logo in the top part of the rail. This is not visible on mobile -->
+    <section slot="rail-top">Rail top</section>
+    <!-- Slot for adding extra actions or other content to the bottom of the rail. This is not visible on mobile -->
+    <section slot="rail-bottom">Rail bottom</section>
+    <!-- The actual page content to display -->
+    <section class="content">${this.renderPage()}</section>
+  </exm-navigation>
+```
+
+Some of the components used in the navigation c an be used separately. Please check the code for implementation
+
+## API
+
+### Slots
+
+| Name             | Description                                                                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------- |
+| `topbar-title`   | Slot for adding a title to the topbar. Topbar is only visible on mobile                                 |
+| `topbar-actions` | Slot for adding actions to the right of the topbar. Topbar is only visible on mobile                    |
+| `rail-top`       | Slot for adding a logo in the top part of the rail. This is not visible on mobile                       |
+| `rail-bottom`    | Slot for adding extra actions or other content to the bottom of the rail. This is not visible on mobile |
+| `default`        | The actual page content to display                                                                      |
+
+### Properties/Attributes
+
+| Name                 | Type         | Default | Description                                                                                |
+| -------------------- | ------------ | ------- | ------------------------------------------------------------------------------------------ |
+| `items`              | `MenuItem[]` | _[]_    | The list of menuitems to display in the navigation component                               |
+| `path`               | `string[]`   | _[]_    | The current/initial path for the navigation                                                |
+| `disable-navigation` | `boolean`    | _false_ | Disable navigation managed by the component. In that case you can use the event to trigger |
+
+#### MenuItem
+
+```typescript
+interface MenuItem {
+  id: string;
+  label: string;
+  path?: string;
+  url?: string;
+  icon?: string;
+  items?: MenuItem[];
+}
+```
+
+### Events
+
+| Name                | Detail           | Description                         |
+| ------------------- | ---------------- | ----------------------------------- |
+| `navigation-change` | `['one', 'two']` | The path selected in the navigation |

package/dist/exm-navigation-base.d.ts

@@ -0,0 +1,131 @@
+import { PropertyValues } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { MenuItem } from './types.js';
+import { ExmNavigationDrawer } from './exm-navigation-drawer.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import './exm-navigation-icon-button.js';
+import './exm-navigation-topbar.js';
+import './exm-navigation-rail.js';
+import './exm-navigation-sub-menu.js';
+import './exm-navigation-drawer-menu.js';
+import './exm-navigation-drawer.js';
+declare const ExmNavigationBase_base: (new (...args: any[]) => {
+    media: "mobile" | "tablet" | "desktop";
+    touch: boolean;
+}) & typeof ExmgElement;
+export declare class ExmNavigationBase extends ExmNavigationBase_base {
+    items: MenuItem[];
+    path: string[];
+    drawerWidth: number;
+    disableNavigate: boolean;
+    drawer?: ExmNavigationDrawer;
+    navContent?: HTMLDivElement;
+    /**
+     * The menu item triggered by hovering and entering submenu's
+     * Once an item with endpoint is clicked, this value should be written to activeItem
+     */
+    selectedItem: string[];
+    /**
+     * The currently active menu item
+     */
+    activeItem: string[];
+    /**
+     * Wether or not the rail should be visible yes or no
+     */
+    railOpen: boolean;
+    /**
+     * Wether or not the drawer should be visible yes or no
+     */
+    drawerOpen: boolean;
+    /**
+     * Object with menuitem and a bool for having that path sub items yes or no
+     */
+    navigationHasSubmenu: Record<string, boolean>;
+    static styles: import("lit").CSSResult[];
+    protected updated(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    /**
+     * Set the correct values when the media changes.
+     */
+    private handleMediaTypeChange;
+    private getPathEndpoint;
+    private loadPage;
+    /**
+     * Handles the drawer state. If it should be open yes or no.
+     * @param param0
+     */
+    handleDrawerOpen({ mobileForce, tabletForce }?: Record<string, boolean>): void;
+    /**
+     * Handle Rail item click or Drawer sub menu click.
+     * If the selected menu item has children, we add the first item to the list (as per Google implementation).
+     * In this case we also do not close the drawer in non desktop mode, so the user is able to select a next level in the menu
+     */
+    private handleRailItemClick;
+    /**
+     * Handle the mouse enter of the rail item.
+     */
+    private handleRailItemMouseEnter;
+    /**
+     * Handle the mouse leave of the rail item.
+     * If the item has no submenu and the current selected item has no submenu, it is safe to close the drawer
+     */
+    private handleRailItemMouseLeave;
+    /**
+     * Handle drawer mouse leave. Should close the drawer
+     */
+    private handleDrawerMouseLeave;
+    /**
+     * Handle the click on a sub menu item
+     * @param param Contains detail. This has the new path to go to.
+     * If the rail is hidden and the selected item has no children, we close the drawer
+     */
+    private handleSubMenuClick;
+    /**
+     * Handle the topbar menu click.
+     * Clicking the menu button in the topbar wil toggle the drawer
+     */
+    private handleTopbarMenuClick;
+    /**
+     * Handle the drawer back button click.
+     * This should reset the active item, so the root-level menu gets triggered
+     */
+    private handleDrawerBackClick;
+    /**
+     * Check if the passed paths last item has children yes or no
+     * @param path Path array
+     * @returns True if the given path has children
+     */
+    private currentSelectedHasChildren;
+    /**
+     * When the rail is not open, show the menu button on top of the drawer to close it
+     */
+    private renderDrawerMenuButton;
+    /**
+     * When no menu item selected, ot only toplevel without children, show the start menu (same as in the rail)
+     * If more levels deep, show the back button
+     */
+    private renderStartMenu;
+    /**
+     * return the sub menus. More then 1 level deep
+     */
+    private renderDrawerSubMenu;
+    /**
+     * Return the Rail
+     */
+    private renderRail;
+    /**
+     * Render the topbar. This is displayed on mobile and contains the menu button and a slot for the title
+     */
+    private renderTopbar;
+    /**
+     * If there is an active item, and that item has children, the width of the drawer should be set for desktop.
+     * This will push the content to the right.
+     *
+     * @returns the width of the drawer area
+     */
+    private getDrawerWidth;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/exm-navigation-base.js

@@ -0,0 +1,391 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { MediaQueries } from './mixins/media-queries.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { style } from './styles/exm-navigation-css.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import './exm-navigation-icon-button.js';
+import './exm-navigation-topbar.js';
+import './exm-navigation-rail.js';
+import './exm-navigation-sub-menu.js';
+import './exm-navigation-drawer-menu.js';
+import './exm-navigation-drawer.js';
+// eslint-disable-next-line new-cap
+export class ExmNavigationBase extends MediaQueries(ExmgElement) {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.path = ['chat'];
+        this.drawerWidth = 319;
+        this.disableNavigate = false;
+        /**
+         * The menu item triggered by hovering and entering submenu's
+         * Once an item with endpoint is clicked, this value should be written to activeItem
+         */
+        this.selectedItem = [];
+        /**
+         * The currently active menu item
+         */
+        this.activeItem = [];
+        /**
+         * Wether or not the rail should be visible yes or no
+         */
+        this.railOpen = true;
+        /**
+         * Wether or not the drawer should be visible yes or no
+         */
+        this.drawerOpen = false;
+        /**
+         * Object with menuitem and a bool for having that path sub items yes or no
+         */
+        this.navigationHasSubmenu = {};
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('media')) {
+            this.handleMediaTypeChange.bind(this)();
+        }
+        if (changedProperties.has('items')) {
+            for (const item of this.items) {
+                this.navigationHasSubmenu[item.id] = (item.items || []).length > 0;
+            }
+            if (this.navigationHasSubmenu[this.path[0]] && this.media === 'desktop') {
+                this.drawerOpen = true;
+            }
+        }
+    }
+    firstUpdated(changedProperties) {
+        if (changedProperties.has('media')) {
+            this.handleMediaTypeChange.bind(this)();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.selectedItem = [...this.path];
+        this.activeItem = [...this.path];
+    }
+    /**
+     * Set the correct values when the media changes.
+     */
+    handleMediaTypeChange() {
+        this.drawerOpen = this.media === 'desktop' && this.navigationHasSubmenu[this.activeItem[0]];
+        this.railOpen = this.media !== 'mobile';
+    }
+    getPathEndpoint() {
+        let items = this.items;
+        let result;
+        const checkItems = (path, last) => {
+            const item = items.find((item) => item.id === path);
+            if (last) {
+                return item === null || item === void 0 ? void 0 : item.path;
+            }
+            items = (item === null || item === void 0 ? void 0 : item.items) || [];
+            return;
+        };
+        for (let i = 0; i < this.selectedItem.length; i++) {
+            result = checkItems(this.selectedItem[i], i === this.selectedItem.length - 1);
+        }
+        return result;
+    }
+    loadPage(path) {
+        this.path = path;
+        this.activeItem = path;
+        const endPoint = this.getPathEndpoint();
+        // If the route does not have a path, skip navigating
+        if (!endPoint) {
+            return;
+        }
+        this.fire('navigation-change', path);
+        if (!this.disableNavigate) {
+            window.history.pushState({}, '', this.getPathEndpoint());
+            window.dispatchEvent(new PopStateEvent('popstate'));
+        }
+    }
+    /**
+     * Handles the drawer state. If it should be open yes or no.
+     * @param param0
+     */
+    handleDrawerOpen({ mobileForce, tabletForce } = {}) {
+        if (this.media === 'mobile' || this.touch) {
+            // Only triggerable by button
+            if (mobileForce || !this.navigationHasSubmenu[this.activeItem[0]]) {
+                this.drawerOpen = false;
+            }
+        }
+        if (this.media === 'tablet') {
+            if (tabletForce) {
+                this.drawerOpen = false;
+            }
+            else {
+                this.drawerOpen = this.navigationHasSubmenu[this.selectedItem[0]];
+            }
+        }
+        if (this.media === 'desktop') {
+            if (this.navigationHasSubmenu[this.activeItem[0]]) {
+                this.drawerOpen = true;
+            }
+            else {
+                this.drawerOpen = this.navigationHasSubmenu[this.selectedItem[0]];
+            }
+        }
+    }
+    /**
+     * Handle Rail item click or Drawer sub menu click.
+     * If the selected menu item has children, we add the first item to the list (as per Google implementation).
+     * In this case we also do not close the drawer in non desktop mode, so the user is able to select a next level in the menu
+     */
+    handleRailItemClick({ detail }) {
+        var _a;
+        if (this.activeItem[0] !== detail || this.media !== 'desktop') {
+            const items = ((_a = this.items.find((item) => item.id === detail)) === null || _a === void 0 ? void 0 : _a.items) || [];
+            if (items.length && !this.touch) {
+                this.selectedItem = [detail, items[0].id];
+            }
+            else {
+                this.selectedItem = [detail];
+            }
+            this.loadPage(this.selectedItem);
+            this.handleDrawerOpen();
+        }
+    }
+    /**
+     * Handle the mouse enter of the rail item.
+     */
+    handleRailItemMouseEnter({ detail }) {
+        if (this.touch) {
+            return;
+        }
+        this.selectedItem = [detail];
+        this.handleDrawerOpen();
+    }
+    /**
+     * Handle the mouse leave of the rail item.
+     * If the item has no submenu and the current selected item has no submenu, it is safe to close the drawer
+     */
+    handleRailItemMouseLeave() { }
+    /**
+     * Handle drawer mouse leave. Should close the drawer
+     */
+    handleDrawerMouseLeave() {
+        /**
+         * On mouse leave the drawer we want to set the active item to the selected item.
+         * If not, it will show the active item on every hover and will make navigating in the selected item impossible
+         */
+        this.selectedItem = this.activeItem;
+        this.handleDrawerOpen({ tabletForce: true });
+    }
+    /**
+     * Handle the click on a sub menu item
+     * @param param Contains detail. This has the new path to go to.
+     * If the rail is hidden and the selected item has no children, we close the drawer
+     */
+    handleSubMenuClick({ detail }) {
+        this.selectedItem = detail;
+        const endPoint = this.getPathEndpoint();
+        let mobileForce = false;
+        if (endPoint) {
+            this.loadPage(this.selectedItem);
+            mobileForce = true;
+        }
+        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint });
+    }
+    /**
+     * Handle the topbar menu click.
+     * Clicking the menu button in the topbar wil toggle the drawer
+     */
+    handleTopbarMenuClick() {
+        this.drawerOpen = !this.drawerOpen;
+    }
+    /**
+     * Handle the drawer back button click.
+     * This should reset the active item, so the root-level menu gets triggered
+     */
+    handleDrawerBackClick() {
+        this.selectedItem = [];
+    }
+    /**
+     * Check if the passed paths last item has children yes or no
+     * @param path Path array
+     * @returns True if the given path has children
+     */
+    currentSelectedHasChildren(path) {
+        let currentItems = this.items;
+        return path.reduce((_, pathSection) => {
+            const item = currentItems.find((currentItem) => currentItem.id === pathSection);
+            currentItems = (item === null || item === void 0 ? void 0 : item.items) || [];
+            return ((item === null || item === void 0 ? void 0 : item.items) || []).length > 0;
+        }, false);
+    }
+    /**
+     * When the rail is not open, show the menu button on top of the drawer to close it
+     */
+    renderDrawerMenuButton() {
+        return !this.railOpen
+            ? html `
+          <section class="drawer-menu-button">
+            <md-icon-button @click=${this.handleTopbarMenuClick}>
+              <md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon>
+            </md-icon-button>
+          </section>
+        `
+            : nothing;
+    }
+    /**
+     * When no menu item selected, ot only toplevel without children, show the start menu (same as in the rail)
+     * If more levels deep, show the back button
+     */
+    renderStartMenu() {
+        if (this.railOpen) {
+            return nothing;
+        }
+        return this.selectedItem.length === 0 ||
+            (this.selectedItem.length === 1 && !this.currentSelectedHasChildren(this.selectedItem))
+            ? html `<exm-navigation-drawer-menu
+          .items=${this.items}
+          .path=${this.activeItem}
+          @drawer-menu-item-click=${this.handleRailItemClick}
+        ></exm-navigation-drawer-menu>`
+            : html `
+          <section class="drawer-back-button">
+            <exm-navigation-icon-button
+              icon="arrow_back"
+              label="Main menu"
+              @navigation-icon-button-click=${this.handleDrawerBackClick}
+            ></exm-navigation-icon-button>
+          </section>
+        `;
+    }
+    /**
+     * return the sub menus. More then 1 level deep
+     */
+    renderDrawerSubMenu() {
+        /**
+         *  When the selected item is empty we do not display the submenu on mobile
+         */
+        if (this.selectedItem.length === 0 && this.media === 'mobile') {
+            return nothing;
+        }
+        /**
+         * Do we have all items of the selectedItem available in the active Item
+         */
+        const selectedInActive = this.selectedItem.reduce((_, item, index) => {
+            if (item === this.activeItem[index]) {
+                return true;
+            }
+            return false;
+        }, false);
+        /**
+         * Determine the data to use for the submenu. This is needed to show the correct selected items in the submenu of the drawer
+         * If all selected Items ar in the active item, show the active item
+         * If the selected item haas no children, but the drawer is open, show the active item
+         * In all the other cases we use the selected item
+         */
+        const selected = selectedInActive || (!this.navigationHasSubmenu[this.selectedItem[0]] && this.drawerOpen)
+            ? this.activeItem
+            : this.selectedItem;
+        return html `
+      <exm-navigation-sub-menu
+        .items=${this.items}
+        .path=${selected}
+        ?has-back-button=${!this.railOpen &&
+            (selected.length > 1 || (selected.length > 0 && this.currentSelectedHasChildren(selected)))}
+        @sub-menu-item-click=${this.handleSubMenuClick}
+      ></exm-navigation-sub-menu>
+    `;
+    }
+    /**
+     * Return the Rail
+     */
+    renderRail() {
+        return html `<exm-navigation-rail
+      .items=${this.items}
+      .selected=${this.activeItem}
+      @rail-item-click=${this.handleRailItemClick}
+      @rail-item-mouseenter=${this.handleRailItemMouseEnter}
+      @rail-item-mouseleave=${this.handleRailItemMouseLeave}
+    >
+      <slot name="rail-top" slot="rail-top"></slot>
+      <slot name="rail-bottom" slot="rail-bottom"></slot>
+    </exm-navigation-rail>`;
+    }
+    /**
+     * Render the topbar. This is displayed on mobile and contains the menu button and a slot for the title
+     */
+    renderTopbar() {
+        return html `<exm-navigation-topbar ?drawer-open=${this.drawerOpen} @topbar-menu-click=${this.handleTopbarMenuClick}>
+      <slot name="topbar-title" slot="topbar-title"></slot>
+      <slot name="topbar-actions" slot="topbar-actions"></slot>
+    </exm-navigation-topbar>`;
+    }
+    /**
+     * If there is an active item, and that item has children, the width of the drawer should be set for desktop.
+     * This will push the content to the right.
+     *
+     * @returns the width of the drawer area
+     */
+    getDrawerWidth() {
+        if (this.media === 'desktop' && this.activeItem.length > 0 && this.navigationHasSubmenu[this.activeItem[0]]) {
+            return this.drawerWidth;
+        }
+        return 0;
+    }
+    render() {
+        const containerStyle = {
+            '--exm-drawer-width': `${this.getDrawerWidth()}px`,
+        };
+        const containerClass = { 'show-topbar': !this.railOpen };
+        return html `
+      <section
+        class="navigation-container ${classMap(containerClass)}"
+        id="navigation-container"
+        style=${styleMap(containerStyle)}
+      >
+        ${this.railOpen ? this.renderRail() : this.renderTopbar()}
+        <exm-navigation-drawer ?open=${this.drawerOpen} @drawer-mouseleave=${this.handleDrawerMouseLeave}>
+          ${[this.renderDrawerMenuButton(), this.renderStartMenu(), this.renderDrawerSubMenu()]}
+        </exm-navigation-drawer>
+        <section class="content">
+          <slot></slot>
+        </section>
+      </section>
+    `;
+    }
+}
+ExmNavigationBase.styles = [style];
+__decorate([
+    property({ type: Array })
+], ExmNavigationBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], ExmNavigationBase.prototype, "path", void 0);
+__decorate([
+    property({ type: Number, attribute: 'drawer-width' })
+], ExmNavigationBase.prototype, "drawerWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-navigation' })
+], ExmNavigationBase.prototype, "disableNavigate", void 0);
+__decorate([
+    query('exm-navigation-drawer')
+], ExmNavigationBase.prototype, "drawer", void 0);
+__decorate([
+    query('#navigation-container')
+], ExmNavigationBase.prototype, "navContent", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "selectedItem", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "activeItem", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "railOpen", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "drawerOpen", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "navigationHasSubmenu", void 0);
+//# sourceMappingURL=exm-navigation-base.js.map

package/dist/exm-navigation-drawer-base.d.ts

@@ -0,0 +1,11 @@
+import { ExmgElement } from '@exmg/lit-base';
+export declare class ExmNavigationDrawerBase extends ExmgElement {
+    open: boolean;
+    persistent: boolean;
+    drawer?: HTMLDivElement;
+    static styles: import("lit").CSSResult[];
+    private handleMouseEnter;
+    private handleMouseLeave;
+    protected firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+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 { classMap } from 'lit/directives/class-map.js';
+export class ExmNavigationDrawerBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.persistent = false;
+    }
+    handleMouseEnter() {
+        this.fire('drawer-mouseenter');
+    }
+    handleMouseLeave() {
+        this.fire('drawer-mouseleave');
+    }
+    async firstUpdated() {
+        var _a;
+        await this.updateComplete;
+        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));
+            }
+        }
+    }
+    render() {
+        const classNames = { open: this.open };
+        return html `<aside
+      class="${classMap(classNames)}"
+      @mouseenter=${this.handleMouseEnter}
+      @mouseleave=${this.handleMouseLeave}
+    >
+      <slot></slot>
+    </aside> `;
+    }
+}
+ExmNavigationDrawerBase.styles = [style];
+__decorate([
+    property({ type: Boolean })
+], ExmNavigationDrawerBase.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmNavigationDrawerBase.prototype, "persistent", void 0);
+__decorate([
+    query('aside')
+], ExmNavigationDrawerBase.prototype, "drawer", void 0);
+//# sourceMappingURL=exm-navigation-drawer-base.js.map

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