@exmg/exm-navigation 1.1.36 → 1.1.37-alpha.31

package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-base.d.ts

@@ -0,0 +1,141 @@
+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';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.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;
+    hoverDisabled: boolean;
+    collapseOnDesktop: 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[];
+    constructor();
+    /**
+     * Get the menu items and the current path and set the correct startPath for the navigation
+     */
+    private setPath;
+    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, desktopForce }?: 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;
+    private handleContentPointerDown;
+    /**
+     * 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/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-base.js

@@ -0,0 +1,506 @@
+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';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+// eslint-disable-next-line new-cap
+export class ExmNavigationBase extends MediaQueries(ExmgElement) {
+    constructor() {
+        super();
+        this.items = [];
+        this.path = ['chat'];
+        this.drawerWidth = 275;
+        this.disableNavigate = false;
+        this.hoverDisabled = false;
+        this.collapseOnDesktop = 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 = {};
+        /**
+         * Listen to popState changes.
+         */
+        window.addEventListener('popstate', () => {
+            this.setPath();
+        });
+    }
+    /**
+     * Get the menu items and the current path and set the correct startPath for the navigation
+     */
+    setPath() {
+        let path = [];
+        /**
+         * Set to true if we found the path. This is needed because for breaking out of a recursive function
+         */
+        let finished = false;
+        /**
+         * Loop through the items with a give depth. For every depth level the id of the route is set to that index
+         * If there is a matching path, we set finished to true, so all levels wil break out of their for-loop
+         * Every call done with depth 0 will reset the path, so no artifacts of the previous route will remain
+         *
+         * @param items The items to loop through
+         * @param depth The navigation depth
+         */
+        function checkItems(items, depth = 0) {
+            for (const item of items) {
+                if (finished) {
+                    break;
+                }
+                if (depth === 0) {
+                    path = [];
+                }
+                path[depth] = item.id;
+                if (item.path === window.location.pathname || `${item.path}/` === window.location.pathname) {
+                    finished = true;
+                    break;
+                }
+                if (item.additionalPath && item.additionalPath.test(window.location.pathname)) {
+                    finished = true;
+                    break;
+                }
+                if (item.items && (item.items || []).length > 0) {
+                    checkItems(item.items, depth + 1);
+                }
+            }
+        }
+        checkItems(this.items);
+        this.path = path;
+        this.selectedItem = path;
+        this.activeItem = path;
+        this.handleDrawerOpen();
+    }
+    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)();
+        }
+        document.documentElement.style.setProperty('--exm-navigation-submenu-width', `${this.drawerWidth}px`);
+        /**
+         * Set the start path
+         */
+        this.setPath();
+    }
+    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, desktopForce } = {}) {
+        const hasActiveSubmenu = this.navigationHasSubmenu[this.activeItem[0]];
+        const hasSelectedSubmenu = this.navigationHasSubmenu[this.selectedItem[0]];
+        if (this.media === 'mobile' || this.touch) {
+            // Only triggerable by button
+            if (mobileForce || !hasActiveSubmenu) {
+                this.drawerOpen = false;
+            }
+        }
+        if (this.media === 'tablet') {
+            if (tabletForce) {
+                this.drawerOpen = false;
+            }
+            else {
+                this.drawerOpen = hasSelectedSubmenu;
+            }
+        }
+        if (this.media === 'desktop') {
+            if (desktopForce) {
+                this.drawerOpen = false;
+                return;
+            }
+            if (this.navigationHasSubmenu[this.activeItem[0]]) {
+                this.drawerOpen = true;
+            }
+            else {
+                this.drawerOpen = hasSelectedSubmenu;
+            }
+        }
+    }
+    /**
+     * 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;
+        const isSameItem = this.activeItem[0] === detail;
+        if (this.hoverDisabled) {
+            if (isSameItem && this.drawerOpen && this.collapseOnDesktop) {
+                this.drawerOpen = false;
+            }
+            else {
+                this.selectedItem = [detail];
+                this.loadPage(this.selectedItem);
+                this.handleDrawerOpen();
+            }
+            return;
+        }
+        const item = this.items.find((item) => item.id === this.activeItem[0]);
+        /**
+         * If this is the current item, skip it.
+         * If it is the current one and we have an additional path, handle the click to be able to go to the path's destination
+         */
+        if (!isSameItem || (this.activeItem[0] === detail && (item === null || item === void 0 ? void 0 : item.additionalPath)) || 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 || this.hoverDisabled) {
+            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
+         */
+        if (this.hoverDisabled) {
+            return;
+        }
+        if (this.media === 'desktop' && this.collapseOnDesktop) {
+            this.selectedItem = this.activeItem;
+            this.drawerOpen = false;
+            return;
+        }
+        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;
+        let desktopForce = false;
+        if (endPoint) {
+            this.loadPage(this.selectedItem);
+            mobileForce = true;
+            if (this.collapseOnDesktop) {
+                desktopForce = true;
+            }
+        }
+        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint, desktopForce });
+    }
+    /**
+     * 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 = [];
+    }
+    // Close the drawer whenever the content area is interacted with
+    handleContentPointerDown() {
+        if (!this.drawerOpen || (this.media === 'desktop' && !this.collapseOnDesktop))
+            return;
+        this.selectedItem = this.activeItem;
+        this.drawerOpen = false;
+    }
+    /**
+     * 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.drawerOpen) {
+            return 0;
+        }
+        const activeItem = this.activeItem[0];
+        const selectedItem = this.selectedItem[0];
+        const activeHasChildren = !!activeItem && this.navigationHasSubmenu[activeItem];
+        const selectedHasChildren = !!selectedItem && this.navigationHasSubmenu[selectedItem];
+        if (activeHasChildren || selectedHasChildren) {
+            return this.drawerWidth;
+        }
+        return 0;
+    }
+    render() {
+        const containerStyle = {
+            '--exm-navigation-submenu-column-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" @pointerdown=${this.handleContentPointerDown}>
+          <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([
+    property({ type: Boolean, attribute: 'hover-disabled' })
+], ExmNavigationBase.prototype, "hoverDisabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'collapse-on-desktop' })
+], ExmNavigationBase.prototype, "collapseOnDesktop", 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/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-base.d.ts

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