@siemens/ix 1.1.0-beta.4 → 1.1.0-beta.6

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

@@ -6,75 +6,40 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { Popover } from '../utils/popover.util';
 import { convertToRemString } from '../utils/rwd.util';
 import { toggleVariant } from '../utils/toggle-theme';
 export class Menu {
   constructor() {
-    /**
-     * Is settings tab visible
-     */
+    this.domObserver = new MutationObserver(this.onDomChange.bind(this));
+    // 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');
+    };
     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.applicationName = undefined;
     this.applicationDescription = '';
-    /**
-     * Maximum number of menu items to show in case enough vertical space is available.
-     * Extra menu items will be collapsed to 'show more' menu item.
-     */
     this.maxVisibleMenuItems = 9;
-    /**
-     */
     this.i18nLegal = 'About & legal information';
-    /**
-     */
     this.i18nSettings = 'Settings';
-    /**
-     */
     this.i18nToggleTheme = 'Toggle theme';
-    /**
-     */
     this.i18nExpand = ' Expand';
-    /**
-     */
     this.i18nCollapse = 'Collapse';
-    /**
-     */
     this.i18nMore = 'More…';
-    /**
-     * Expand menu
-     */
     this.expand = false;
     this.showMoreItems = false;
     this.visibleMenuItems = 0;
     this.countMoreNotifications = 0;
     this.mapExpand = true;
+    this.activeTab = undefined;
     this.isMoreTabEmpty = false;
-    this.domObserver = new MutationObserver(this.onDomChange.bind(this));
-    // 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');
-    };
   }
   onWindowResize() {
     this.visibleMenuItems = this.getMaxTabCount();
@@ -495,494 +460,485 @@ export class Menu {
   render() {
     return (h(Host, { class: {
         expanded: this.expand,
-      } },
-      h("div", { class: {
-          menu: true,
-          expanded: this.expand,
-        }, onClick: () => {
-          this.resetActiveTab();
-        } },
-        h("div", { onClick: async () => this.toggleMenu(), class: {
-            'burger-menu-button': true,
-            expanded: this.expand,
-          } },
-          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "32", height: "32" },
-            h("rect", { class: "line line-1", x: "5", y: "9.5", width: "22", height: "2" }),
-            h("rect", { class: "line line-2", x: "5", y: "15.5", width: "22", height: "2" }),
-            h("rect", { class: "line line-3", x: "5", y: "21.5", width: "22", height: "2" }))),
-        h("div", { id: "avatar-tab-placeholder" }),
-        h("div", { id: "menu-tabs", style: {
-            display: 'contents',
-          }, onClick: (event) => {
-            if (this.isMenuItemClicked(event)) {
-              this.resetOverlay();
-            }
-          } },
-          h("div", { class: "tabs-top" }),
-          h("slot", null),
-          h("div", { class: "active-more-tab" }, this.activeTab ? (h("ix-menu-item", { class: "internal-tab", active: true, tabIcon: this.activeTab.tabIcon }, this.activeTab.innerText)) : null),
-          h("ix-menu-item", { id: "more-tab", tabIcon: "more-menu", class: {
-              'internal-tab': true,
-            }, style: {
-              display: this.showMoreButton() ? 'block' : 'none',
-            }, title: "Show more", notifications: this.countMoreNotifications, onClick: () => this.toggleShowMoreDropdown() },
-            this.i18nMore,
-            h("ix-dropdown", { show: this.showMoreItems }, this.menuItems
-              .filter((elm, index) => !this.showTab(index) &&
-              !this.isMenuItemActive(elm) &&
-              this.isVisible(elm))
-              .map((e) => {
-              return (h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, class: "internal-tab appended", onClick: () => e.dispatchEvent(new CustomEvent('click')) }, e.innerText));
-            })))),
-        h("div", { class: "bottom-tab-divider" }),
-        this.enableSettings && !this.isSettingsEmpty ? (h("ix-menu-item", { id: "settings", class: {
-            'internal-tab': true,
-            'bottom-tab': true,
-            active: this.showSettings,
-          }, tabIcon: "cogwheel", onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null,
-        h("slot", { name: "bottom" }),
-        h("div", { id: "popover-area" }),
-        this.about ? (h("ix-menu-item", { id: "aboutAndLegal", class: {
-            'internal-tab': true,
-            'bottom-tab': true,
-            active: this.showAbout,
-          }, tabIcon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null,
-        this.enableToggleTheme ? (h("ix-menu-item", { id: "toggleTheme", onClick: () => toggleVariant(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null,
-        this.enableMapExpand ? (h("ix-menu-item", { id: "menu-collapse", onClick: () => this.mapExpandChange.emit(this.mapExpand), class: "internal-tab bottom-tab", tabIcon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null),
-      h("div", { class: {
-          'menu-overlay': true,
-          expanded: this.expand,
-          'd-block': this.showAbout || this.showSettings,
-        }, style: {
-          opacity: this.showAbout || this.showSettings ? '1' : '0',
-        } }),
-      h("div", { class: "menu-overlay-invisible" })));
+      } }, h("div", { class: {
+        menu: true,
+        expanded: this.expand,
+      }, onClick: () => {
+        this.resetActiveTab();
+      } }, h("div", { onClick: async () => this.toggleMenu(), class: {
+        'burger-menu-button': true,
+        expanded: this.expand,
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "32", height: "32" }, h("rect", { class: "line line-1", x: "5", y: "9.5", width: "22", height: "2" }), h("rect", { class: "line line-2", x: "5", y: "15.5", width: "22", height: "2" }), h("rect", { class: "line line-3", x: "5", y: "21.5", width: "22", height: "2" }))), h("div", { id: "avatar-tab-placeholder" }), h("div", { id: "menu-tabs", style: {
+        display: 'contents',
+      }, onClick: (event) => {
+        if (this.isMenuItemClicked(event)) {
+          this.resetOverlay();
+        }
+      } }, h("div", { class: "tabs-top" }), h("slot", null), h("div", { class: "active-more-tab" }, this.activeTab ? (h("ix-menu-item", { class: "internal-tab", active: true, tabIcon: this.activeTab.tabIcon }, this.activeTab.innerText)) : null), h("ix-menu-item", { id: "more-tab", tabIcon: "more-menu", class: {
+        'internal-tab': true,
+      }, style: {
+        display: this.showMoreButton() ? 'block' : 'none',
+      }, title: "Show more", notifications: this.countMoreNotifications, onClick: () => this.toggleShowMoreDropdown() }, this.i18nMore, h("ix-dropdown", { show: this.showMoreItems }, this.menuItems
+      .filter((elm, index) => !this.showTab(index) &&
+      !this.isMenuItemActive(elm) &&
+      this.isVisible(elm))
+      .map((e) => {
+      return (h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, class: "internal-tab appended", onClick: () => e.dispatchEvent(new CustomEvent('click')) }, e.innerText));
+    })))), h("div", { class: "bottom-tab-divider" }), this.enableSettings && !this.isSettingsEmpty ? (h("ix-menu-item", { id: "settings", class: {
+        'internal-tab': true,
+        'bottom-tab': true,
+        active: this.showSettings,
+      }, tabIcon: "cogwheel", onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, h("slot", { name: "bottom" }), h("div", { id: "popover-area" }), this.about ? (h("ix-menu-item", { id: "aboutAndLegal", class: {
+        'internal-tab': true,
+        'bottom-tab': true,
+        active: this.showAbout,
+      }, tabIcon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { id: "toggleTheme", onClick: () => toggleVariant(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null, this.enableMapExpand ? (h("ix-menu-item", { id: "menu-collapse", onClick: () => this.mapExpandChange.emit(this.mapExpand), class: "internal-tab bottom-tab", tabIcon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { class: {
+        'menu-overlay': true,
+        expanded: this.expand,
+        'd-block': this.showAbout || this.showSettings,
+      }, style: {
+        opacity: this.showAbout || this.showSettings ? '1' : '0',
+      } }), h("div", { class: "menu-overlay-invisible" })));
   }
   static get is() { return "ix-menu"; }
-  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"
-      },
-      "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"
-      },
-      "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!"
-      },
-      "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"
-      },
-      "attribute": "enable-settings",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "enableMapExpand": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Internal"
-      },
-      "attribute": "enable-map-expand",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "applicationName": {
-      "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"
-      },
-      "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"
-      },
-      "attribute": "application-description",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "maxVisibleMenuItems": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Maximum number of menu items to show in case enough vertical space is available.\nExtra menu items will be collapsed to 'show more' menu item."
-      },
-      "attribute": "max-visible-menu-items",
-      "reflect": false,
-      "defaultValue": "9"
-    },
-    "i18nLegal": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "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": ""
-      },
-      "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": ""
-      },
-      "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": ""
-      },
-      "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": ""
-      },
-      "attribute": "i-1-8n-collapse",
-      "reflect": false,
-      "defaultValue": "'Collapse'"
-    },
-    "i18nMore": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "i-1-8n-more",
-      "reflect": false,
-      "defaultValue": "'More\u2026'"
-    },
-    "expand": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Expand menu"
-      },
-      "attribute": "expand",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "showMoreItems": {},
-    "visibleMenuItems": {},
-    "countMoreNotifications": {},
-    "mapExpand": {},
-    "activeTab": {},
-    "isMoreTabEmpty": {}
-  }; }
-  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": {}
-      }
-    }]; }
-  static get methods() { return {
-    "toggleMapExpand": {
-      "complexType": {
-        "signature": "(show?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "show"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Toggle map sidebar expand",
-        "tags": [{
-            "name": "param",
-            "text": "show"
-          }]
+  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"
+        },
+        "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"
+        },
+        "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!"
+        },
+        "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"
+        },
+        "attribute": "enable-settings",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableMapExpand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Internal"
+        },
+        "attribute": "enable-map-expand",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "applicationName": {
+        "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"
+        },
+        "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"
+        },
+        "attribute": "application-description",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "maxVisibleMenuItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum number of menu items to show in case enough vertical space is available.\nExtra menu items will be collapsed to 'show more' menu item."
+        },
+        "attribute": "max-visible-menu-items",
+        "reflect": false,
+        "defaultValue": "9"
+      },
+      "i18nLegal": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "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": ""
+        },
+        "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": ""
+        },
+        "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": ""
+        },
+        "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": ""
+        },
+        "attribute": "i-1-8n-collapse",
+        "reflect": false,
+        "defaultValue": "'Collapse'"
+      },
+      "i18nMore": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "i-1-8n-more",
+        "reflect": false,
+        "defaultValue": "'More\u2026'"
+      },
+      "expand": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Expand menu"
+        },
+        "attribute": "expand",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    },
-    "toggleMenu": {
-      "complexType": {
-        "signature": "(show?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "show"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
+    };
+  }
+  static get states() {
+    return {
+      "showMoreItems": {},
+      "visibleMenuItems": {},
+      "countMoreNotifications": {},
+      "mapExpand": {},
+      "activeTab": {},
+      "isMoreTabEmpty": {}
+    };
+  }
+  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": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggleMapExpand": {
+        "complexType": {
+          "signature": "(show?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "show"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle map sidebar expand",
+          "tags": [{
+              "name": "param",
+              "text": "show"
+            }]
+        }
       },
-      "docs": {
-        "text": "Toggle menu",
-        "tags": [{
-            "name": "param",
-            "text": "show"
-          }]
-      }
-    },
-    "toggleSettings": {
-      "complexType": {
-        "signature": "(show: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "show"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
+      "toggleMenu": {
+        "complexType": {
+          "signature": "(show?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "show"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle menu",
+          "tags": [{
+              "name": "param",
+              "text": "show"
+            }]
+        }
       },
-      "docs": {
-        "text": "Toggle Settings tabs",
-        "tags": [{
-            "name": "param",
-            "text": "show"
-          }]
-      }
-    },
-    "toggleAbout": {
-      "complexType": {
-        "signature": "(show: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "show"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
+      "toggleSettings": {
+        "complexType": {
+          "signature": "(show: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "show"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle Settings tabs",
+          "tags": [{
+              "name": "param",
+              "text": "show"
+            }]
+        }
       },
-      "docs": {
-        "text": "Toggle About tabs",
-        "tags": [{
-            "name": "param",
-            "text": "show"
-          }]
+      "toggleAbout": {
+        "complexType": {
+          "signature": "(show: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "show"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle About tabs",
+          "tags": [{
+              "name": "param",
+              "text": "show"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "onWindowResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "onWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }