@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/collection/components/menu/menu.js

@@ -0,0 +1,1046 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host, } from "@stencil/core";
+import anime from "animejs";
+import { ApplicationSidebarToggleEvent } from "../application-sidebar/events";
+import { showAppSwitch } from "../utils/app-switch";
+import { ApplicationLayoutContext } from "../utils/application-layout/context";
+import { applicationLayoutService } from "../utils/application-layout/service";
+import { useContextConsumer } from "../utils/context";
+import { menuController } from "../utils/menu-service/menu-service";
+import { convertToRemString } from "../utils/rwd.util";
+import { themeSwitcher } from "../utils/theme-switcher";
+import { iconApps, iconCogwheel, iconInfo, iconLightDark, iconNavigationLeft, iconNavigationRight, } from "@siemens/ix-icons/icons";
+export class Menu {
+    constructor() {
+        /**
+         * Is settings tab visible
+         */
+        this.showSettings = false;
+        /**
+         * Is about tab visible
+         */
+        this.showAbout = false;
+        /**
+         * Show toggle between light and dark variant. Only if the provided theme have implemented both!
+         */
+        this.enableToggleTheme = false;
+        /**
+         * Is settings tab is visible
+         */
+        this.enableSettings = true;
+        /** @internal */
+        this.enableMapExpand = false;
+        /**
+         * Should only be set if you use ix-menu standalone
+         */
+        this.applicationDescription = '';
+        /**
+         * Accessibility i18n label for the burger menu of the sidebar
+         */
+        this.i18nExpandSidebar = 'Expand sidebar';
+        /**
+         *  Toggle the expand state of the menu
+         */
+        this.expand = false;
+        /**
+         *  If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
+         *
+         *  @since 2.2.0
+         */
+        this.startExpanded = false;
+        /**
+         * Menu stays pinned to the left
+         */
+        this.pinned = false;
+        /**
+         */
+        this.i18nLegal = 'About & legal information';
+        /**
+         */
+        this.i18nSettings = 'Settings';
+        /**
+         */
+        this.i18nToggleTheme = 'Toggle theme';
+        /**
+         */
+        this.i18nExpand = ' Expand';
+        /**
+         */
+        this.i18nCollapse = 'Collapse';
+        this.showPinned = false;
+        this.mapExpand = true;
+        this.breakpoint = 'lg';
+        this.itemsScrollShadowTop = false;
+        this.itemsScrollShadowBottom = false;
+        this.isTransitionDisabled = false;
+        // FBC IAM workaround #488
+        this.isVisible = (elm) => {
+            var _a, _b;
+            return (elm.style.display !== 'none' &&
+                ((_b = (_a = elm.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.style.display) !== 'none');
+        };
+    }
+    pinnedChange(newPinned) {
+        var _a;
+        if (((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.host) === 'map-navigation') {
+            console.warn('ix-map-navigation does not support pinning of the menu');
+            return;
+        }
+        this.setPinned(this.pinned);
+        if (newPinned) {
+            applicationLayoutService.disableBreakpointDetection();
+            applicationLayoutService.setBreakpoint('lg');
+            return;
+        }
+        applicationLayoutService.enableBreakpointDetection();
+    }
+    get popoverArea() {
+        return this.hostElement.shadowRoot.querySelector('#popover-area');
+    }
+    get menu() {
+        return this.hostElement.shadowRoot.querySelector('.menu');
+    }
+    get menuItemsContainer() {
+        return this.menu.querySelector('.tabs');
+    }
+    get overlayContainer() {
+        return this.hostElement.shadowRoot.querySelector('.menu-overlay');
+    }
+    get menuItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter((elm) => this.isVisible(elm));
+    }
+    get menuBottomItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)')).filter((elm) => this.isVisible(elm));
+    }
+    get homeTab() {
+        return this.hostElement.querySelector('ix-menu-item.home-tab');
+    }
+    get moreItemsDropdown() {
+        return this.hostElement.shadowRoot.querySelector('.internal-tab ix-dropdown');
+    }
+    get isMoreItemsDropdownEmpty() {
+        return (this.hostElement.shadowRoot.querySelectorAll('.internal-tab ix-dropdown .appended').length === 0);
+    }
+    get moreItemsDropdownItems() {
+        return this.hostElement.shadowRoot.querySelectorAll('.internal-tab ix-dropdown ix-menu-item');
+    }
+    get activeMoreTabContainer() {
+        return this.hostElement.shadowRoot.querySelector('.active-more-tab');
+    }
+    get activeMoreTab() {
+        return this.hostElement.shadowRoot.querySelector('.active-more-tab ix-menu-item');
+    }
+    get aboutPopoverContainer() {
+        return this.hostElement.querySelector('.about-news');
+    }
+    get aboutNewsPopover() {
+        var _a;
+        return ((_a = document.querySelector('ix-menu-about-news')) !== null && _a !== void 0 ? _a : this.hostElement.querySelector('ix-menu-about-news'));
+    }
+    get aboutTab() {
+        return this.hostElement.shadowRoot.querySelector('#aboutAndLegal');
+    }
+    get about() {
+        return this.hostElement.querySelector('ix-menu-about');
+    }
+    get settings() {
+        return this.hostElement.querySelector('ix-menu-settings');
+    }
+    get isSettingsEmpty() {
+        return (Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-menu-settings-item')).length === 0);
+    }
+    get tabsContainer() {
+        return this.hostElement;
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.handleOverflowIndicator();
+        });
+        if (this.pinned) {
+            this.pinnedChange(this.pinned);
+        }
+    }
+    componentWillLoad() {
+        useContextConsumer(this.hostElement, ApplicationLayoutContext, (ctx) => {
+            this.applicationLayoutContext = ctx;
+            if (ctx.hideHeader === true) {
+                this.onBreakpointChange('md');
+                return;
+            }
+            this.onBreakpointChange(applicationLayoutService.breakpoint);
+        }, true);
+        menuController.register(this.hostElement);
+        applicationLayoutService.onChange.on((breakpoint) => this.onBreakpointChange(breakpoint));
+        this.onBreakpointChange(applicationLayoutService.breakpoint, true);
+    }
+    componentDidRender() {
+        if (!this.about && this.aboutNewsPopover) {
+            this.aboutNewsPopover.show = false;
+        }
+        this.appendFragments();
+    }
+    setPinned(pinned) {
+        this.showPinned = pinned;
+        menuController.setIsPinned(pinned);
+    }
+    onBreakpointChange(mode, initial = false) {
+        var _a;
+        if (!this.applicationLayoutContext && mode === 'sm') {
+            return;
+        }
+        if (((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.host) === 'map-navigation') {
+            this.breakpoint = 'md';
+            return;
+        }
+        if (!this.applicationLayoutContext) {
+            return;
+        }
+        if (this.applicationLayoutContext.hideHeader && mode === 'sm') {
+            return;
+        }
+        this.setPinned(mode === 'lg');
+        if (initial || mode !== this.breakpoint)
+            this.toggleMenu(mode === 'lg' && this.startExpanded);
+        this.breakpoint = mode;
+    }
+    appendFragments() {
+        this.appendAboutNewsPopover();
+    }
+    getAboutPopoverVerticalPosition() {
+        var _a;
+        const heightArrow = 12;
+        const offsetArrow = 6;
+        const rectAbout = ((_a = this.aboutTab) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+            bottom: -window.innerHeight,
+            height: 0,
+        };
+        const offset = window.innerHeight -
+            (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);
+        return convertToRemString(offset);
+    }
+    appendAboutNewsPopover() {
+        var _a;
+        if (!this.aboutNewsPopover || !this.about) {
+            return;
+        }
+        this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();
+        if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutNewsPopover))) {
+            const showMore = () => {
+                var _a;
+                if (((_a = this.aboutNewsPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) && this.about) {
+                    this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;
+                    this.toggleAbout(true);
+                }
+            };
+            this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));
+            document.body.appendChild(this.aboutNewsPopover);
+        }
+    }
+    /**
+     * Toggle map sidebar expand
+     * @param show
+     */
+    async toggleMapExpand(show) {
+        if (show !== undefined) {
+            this.mapExpand = show;
+        }
+        else {
+            this.mapExpand = !this.mapExpand;
+        }
+    }
+    /**
+     * Toggle menu
+     * @param show
+     */
+    async toggleMenu(show) {
+        const oldExpand = this.expand;
+        if (show !== undefined) {
+            this.expand = show;
+        }
+        else {
+            this.expand = !this.expand;
+        }
+        if (this.aboutNewsPopover) {
+            this.aboutNewsPopover.expanded = this.expand;
+        }
+        const { defaultPrevented } = this.expandChange.emit(this.expand);
+        if (defaultPrevented) {
+            this.expand = oldExpand;
+            if (this.aboutNewsPopover) {
+                this.aboutNewsPopover.expanded = oldExpand;
+            }
+            return;
+        }
+        this.isTransitionDisabled = false;
+        this.checkTransition();
+        if (this.breakpoint == 'sm' && this.expand) {
+            setTimeout(() => {
+                this.handleOverflowIndicator();
+            }, 100);
+        }
+    }
+    /**
+     * Disable transition of overlay while menu animation is running.
+     */
+    checkTransition() {
+        const container = this.overlayContainer;
+        if (!container) {
+            return;
+        }
+        if (this.isTransitionDisabled) {
+            container.style.transitionProperty = 'left';
+        }
+        else {
+            container.style.transitionProperty = 'all';
+        }
+    }
+    isOverlayVisible() {
+        return this.showAbout || this.showSettings;
+    }
+    /**
+     * Toggle Settings tabs
+     * @param show
+     */
+    async toggleSettings(show) {
+        if (!this.settings) {
+            return;
+        }
+        const { defaultPrevented } = this.openSettings.emit();
+        if (defaultPrevented) {
+            return;
+        }
+        if (!this.isOverlayVisible()) {
+            this.animateOverlayFadeIn();
+        }
+        if (show) {
+            this.resetOverlay();
+            this.showSettings = show;
+            this.settings.show = this.showSettings;
+        }
+        else {
+            this.onOverlayClose();
+        }
+    }
+    /**
+     * Toggle About tabs
+     * @param show
+     */
+    async toggleAbout(show) {
+        if (!this.about) {
+            return;
+        }
+        const { defaultPrevented } = this.openAbout.emit();
+        if (defaultPrevented) {
+            return;
+        }
+        if (!this.isOverlayVisible()) {
+            this.animateOverlayFadeIn();
+        }
+        if (show) {
+            this.resetOverlay();
+            this.showAbout = show;
+            this.about.show = this.showAbout;
+        }
+        else {
+            this.onOverlayClose();
+        }
+    }
+    resetOverlay() {
+        this.showSettings = false;
+        this.showAbout = false;
+        if (this.settings) {
+            this.settings.show = false;
+        }
+        if (this.about) {
+            this.about.show = false;
+        }
+    }
+    getCollapseText() {
+        return this.mapExpand ? this.i18nCollapse : this.i18nExpand;
+    }
+    getCollapseIcon() {
+        return this.mapExpand ? iconNavigationLeft : iconNavigationRight;
+    }
+    isMenuItemClicked(event) {
+        if (event.target instanceof HTMLElement) {
+            return event.target.tagName === 'IX-MENU-ITEM';
+        }
+        return false;
+    }
+    handleOverflowIndicator() {
+        const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;
+        this.itemsScrollShadowTop = scrollTop > 0;
+        this.itemsScrollShadowBottom =
+            Math.round(scrollTop + clientHeight) < scrollHeight;
+    }
+    onOverlayClose() {
+        this.animateOverlayFadeOut(() => {
+            this.resetOverlay();
+        });
+    }
+    animateOverlayFadeIn() {
+        requestAnimationFrame(() => {
+            anime({
+                targets: this.overlayContainer,
+                duration: 300,
+                backdropFilter: [0, 'blur(1rem)'],
+                translateX: ['-4rem', 0],
+                opacity: [0, 1],
+                easing: 'easeInSine',
+                begin: () => {
+                    if (this.showPinned) {
+                        return;
+                    }
+                    this.toggleMenu(false);
+                },
+            });
+        });
+    }
+    animateOverlayFadeOut(onComplete) {
+        requestAnimationFrame(() => {
+            anime({
+                targets: this.overlayContainer,
+                duration: 300,
+                backdropFilter: ['blur(1rem)', 0],
+                translateX: [0, '-4rem'],
+                opacity: [1, 0],
+                easing: 'easeInSine',
+                complete: () => onComplete(),
+            });
+        });
+    }
+    onMenuItemsClick(event) {
+        if (this.isMenuItemClicked(event)) {
+            if (!this.showPinned) {
+                this.toggleMenu(false);
+            }
+            this.onOverlayClose();
+        }
+    }
+    isHiddenFromViewport() {
+        return this.breakpoint === 'sm' && this.expand === false;
+    }
+    sidebarToggle() {
+        this.mapExpandChange.emit(this.mapExpand);
+        this.hostElement.dispatchEvent(new ApplicationSidebarToggleEvent(this.mapExpand));
+    }
+    async showAppSwitch() {
+        var _a;
+        const { defaultPrevented } = this.openAppSwitch.emit();
+        if (defaultPrevented) {
+            return;
+        }
+        if ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) {
+            showAppSwitch(this.applicationLayoutContext.appSwitchConfig);
+        }
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { key: '399b24ede589bfad9528bea4392c9054b3d0461b', class: {
+                expanded: this.expand,
+                [`breakpoint-${this.breakpoint}`]: true,
+            }, slot: "menu" }, h("nav", { key: '90d7abe543d3626c562c97637f186227a07d8a80', class: {
+                menu: true,
+                expanded: this.expand,
+            } }, h("div", { key: '73c45171a05831f52ec82f67212c00e22445643d', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: 'a60fed4a2191b18903a1bb3a1805e67eda925a00', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (h("ix-icon-button", { key: 'eeac468e4edf2bc90d52e5f6c1b5ec33b673400d', onClick: () => {
+                this.showAppSwitch();
+            }, icon: iconApps, ghost: true }))), h("div", { key: '14b0349a9f7fd7fb92dffd69d0ce2882e627d29e', id: "menu-tabs", style: {
+                display: 'contents',
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: 'dca30d5bf98b83e776fafe7708586a204bbd5de1', class: "tabs-shadow-container" }, h("div", { key: 'cb243ca034e6612dad9107a9f53d22e833bee9a3', class: {
+                'tabs--shadow': true,
+                'tabs--shadow-top': true,
+                'tabs--shadow--show': this.itemsScrollShadowTop,
+            } }), h("div", { key: '997a2f8f8762c25d0e92f223f119af436e6fd4b7', class: {
+                tabs: true,
+                'show-scrollbar': this.expand,
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '8685278d96b4afce9e68fe780907c1385ad3e730', class: "menu-avatar" }, h("slot", { key: '9d8b09624ae560118a5677c3978d24364b988319', name: "ix-menu-avatar" })), h("slot", { key: 'd0098a9a68369713a02e4118ed10abed5fbd64f3', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '031fe38db543f6661dd6e950825ecd311752c2bd', class: {
+                'tabs--shadow': true,
+                'tabs--shadow-bottom': true,
+                'tabs--shadow--show': this.itemsScrollShadowBottom,
+            } }))), h("div", { key: 'c02ca069adbc019601db85ba560c303209fc2e3a', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+                'internal-tab': true,
+                'bottom-tab': true,
+                active: this.showSettings,
+            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, h("div", { key: '017d2aff04ec6763938d344c18293dccbff99356', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: 'a224710759e1a84f500b50497ff0cf442f656ae3', name: "bottom" })), h("div", { key: 'ea74cad15c8c3aaff02c7230a9d8298212e2b05a', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+                'internal-tab': true,
+                'bottom-tab': true,
+                active: this.showAbout,
+            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme })) : null, this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null), h("div", { key: '04b30df0d35054be5ef65d8fab91a6b92c225fb9', class: {
+                'menu-overlay': true,
+                visible: this.isOverlayVisible(),
+                expanded: this.expand,
+            }, onTransitionEnd: () => {
+                this.isTransitionDisabled = true;
+                this.checkTransition();
+            } }, h("div", { key: '95534ab84a9e2f3d30a1be08b2dd45b4d526a844', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '3d4f4bf7ef1debe0e46b00740298fb6519900acd', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+    }
+    static get is() { return "ix-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showSettings": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is settings tab visible"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-settings",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showAbout": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is about tab visible"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-about",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "enableToggleTheme": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show toggle between light and dark variant. Only if the provided theme have implemented both!"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-toggle-theme",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "enableSettings": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is settings tab is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-settings",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "enableMapExpand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-map-expand",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "applicationName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Should only be set if you use ix-menu standalone"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "application-name",
+                "reflect": false
+            },
+            "applicationDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should only be set if you use ix-menu standalone"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "application-description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "i18nExpandSidebar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessibility i18n label for the burger menu of the sidebar"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-expand-sidebar",
+                "reflect": false,
+                "defaultValue": "'Expand sidebar'"
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggle the expand state of the menu"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expand",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "startExpanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.2.0"
+                        }],
+                    "text": "If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start-expanded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pinned": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu stays pinned to the left"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "pinned",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "i18nLegal": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-legal",
+                "reflect": false,
+                "defaultValue": "'About & legal information'"
+            },
+            "i18nSettings": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-settings",
+                "reflect": false,
+                "defaultValue": "'Settings'"
+            },
+            "i18nToggleTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-toggle-theme",
+                "reflect": false,
+                "defaultValue": "'Toggle theme'"
+            },
+            "i18nExpand": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-expand",
+                "reflect": false,
+                "defaultValue": "' Expand'"
+            },
+            "i18nCollapse": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-collapse",
+                "reflect": false,
+                "defaultValue": "'Collapse'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showPinned": {},
+            "mapExpand": {},
+            "breakpoint": {},
+            "itemsScrollShadowTop": {},
+            "itemsScrollShadowBottom": {},
+            "applicationLayoutContext": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expandChange",
+                "name": "expandChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu expanded"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "mapExpandChange",
+                "name": "mapExpandChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Map Sidebar expanded"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "openAppSwitch",
+                "name": "openAppSwitch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "3.0.0"
+                        }],
+                    "text": "Event emitted when the app switch button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "openSettings",
+                "name": "openSettings",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "3.0.0"
+                        }],
+                    "text": "Event emitted when the settings button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "openAbout",
+                "name": "openAbout",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "3.0.0"
+                        }],
+                    "text": "Event emitted when the about button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleMapExpand": {
+                "complexType": {
+                    "signature": "(show?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "show",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle map sidebar expand",
+                    "tags": [{
+                            "name": "param",
+                            "text": "show"
+                        }]
+                }
+            },
+            "toggleMenu": {
+                "complexType": {
+                    "signature": "(show?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "show",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle menu",
+                    "tags": [{
+                            "name": "param",
+                            "text": "show"
+                        }]
+                }
+            },
+            "toggleSettings": {
+                "complexType": {
+                    "signature": "(show: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "show",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle Settings tabs",
+                    "tags": [{
+                            "name": "param",
+                            "text": "show"
+                        }]
+                }
+            },
+            "toggleAbout": {
+                "complexType": {
+                    "signature": "(show: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "show",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle About tabs",
+                    "tags": [{
+                            "name": "param",
+                            "text": "show"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "pinned",
+                "methodName": "pinnedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleOverflowIndicator",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "close",
+                "method": "onOverlayClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=menu.js.map