@siemens/ix 1.4.0-beta.0 → 1.4.0-beta.2

package/dist/components/group-context-menu.js

@@ -23,9 +23,6 @@ const GroupContextMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   componentWillRender() {
     this.showContextMenu = !!this.dropdownElement;
   }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
   render() {
     return (h(Host, null, h("ix-icon-button", { class: { hide: !this.showContextMenu }, ref: (ref) => this.dropdownElement ? this.configureDropdown(ref) : null, size: "24", ghost: true, icon: "context-menu" }), h("slot", null)));
   }

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export { BasicNavigation as IxBasicNavigation } from '../types/components/basic-
 export { Blind as IxBlind } from '../types/components/blind/blind';
 export { Breadcrumb as IxBreadcrumb } from '../types/components/breadcrumb/breadcrumb';
 export { BreadcrumbItem as IxBreadcrumbItem } from '../types/components/breadcrumb-item/breadcrumb-item';
+export { BurgerMenu as IxBurgerMenu } from '../types/components/menu/burger-menu';
 export { Button as IxButton } from '../types/components/button/button';
 export { CategoryFilter as IxCategoryFilter } from '../types/components/category-filter/category-filter';
 export { Chip as IxChip } from '../types/components/chip/chip';
@@ -13,10 +14,12 @@ export { CounterPill as IxCounterPill } from '../types/components/counter-pill/c
 export { DatePicker as IxDatePicker } from '../types/components/date-picker/date-picker';
 export { DateTimeCard as IxDateTimeCard } from '../types/components/date-time-card/date-time-card';
 export { DatePicker as IxDatetimePicker } from '../types/components/datetime-picker/datetime-picker';
+export { Divider as IxDivider } from '../types/components/divider/divider';
 export { Drawer as IxDrawer } from '../types/components/drawer/drawer';
 export { Dropdown as IxDropdown } from '../types/components/dropdown/dropdown';
 export { DropdownButton as IxDropdownButton } from '../types/components/dropdown-button/dropdown-button';
 export { DropdownItem as IxDropdownItem } from '../types/components/dropdown-item/dropdown-item';
+export { DropdownQuickActions as IxDropdownQuickActions } from '../types/components/dropdown-quick-actions/dropdown-quick-actions';
 export { EventList as IxEventList } from '../types/components/event-list/event-list';
 export { EventListItem as IxEventListItem } from '../types/components/event-list-item/event-list-item';
 export { ExpandingSearch as IxExpandingSearch } from '../types/components/expanding-search/expanding-search';
@@ -59,8 +62,10 @@ export { TimePicker as IxTimePicker } from '../types/components/time-picker/time
 export { Toast as IxToast } from '../types/components/toast/toast';
 export { ToastContainer as IxToastContainer } from '../types/components/toast/toast-container';
 export { CuiToggle as IxToggle } from '../types/components/toggle/toggle';
+export { Tooltip as IxTooltip } from '../types/components/tooltip/tooltip';
 export { Tree as IxTree } from '../types/components/tree/tree';
 export { TreeItem as IxTreeItem } from '../types/components/tree-item/tree-item';
+export { IxTypography as IxTypography } from '../types/components/typography/typography';
 export { Upload as IxUpload } from '../types/components/upload/upload';
 export { ValidationTooltip as IxValidationTooltip } from '../types/components/validation-tooltip/validation-tooltip';
 export { WorkflowStep as IxWorkflowStep } from '../types/components/workflow-step/workflow-step';

package/dist/components/index.js

@@ -15,16 +15,19 @@ export { IxBasicNavigation, defineCustomElement as defineCustomElementIxBasicNav
 export { IxBlind, defineCustomElement as defineCustomElementIxBlind } from './ix-blind.js';
 export { IxBreadcrumb, defineCustomElement as defineCustomElementIxBreadcrumb } from './ix-breadcrumb.js';
 export { IxBreadcrumbItem, defineCustomElement as defineCustomElementIxBreadcrumbItem } from './ix-breadcrumb-item.js';
+export { IxBurgerMenu, defineCustomElement as defineCustomElementIxBurgerMenu } from './ix-burger-menu.js';
 export { IxButton, defineCustomElement as defineCustomElementIxButton } from './ix-button.js';
 export { IxChip, defineCustomElement as defineCustomElementIxChip } from './ix-chip.js';
 export { IxCounterPill, defineCustomElement as defineCustomElementIxCounterPill } from './ix-counter-pill.js';
 export { IxDatePicker, defineCustomElement as defineCustomElementIxDatePicker } from './ix-date-picker.js';
 export { IxDateTimeCard, defineCustomElement as defineCustomElementIxDateTimeCard } from './ix-date-time-card.js';
 export { IxDatetimePicker, defineCustomElement as defineCustomElementIxDatetimePicker } from './ix-datetime-picker.js';
+export { IxDivider, defineCustomElement as defineCustomElementIxDivider } from './ix-divider.js';
 export { IxDrawer, defineCustomElement as defineCustomElementIxDrawer } from './ix-drawer.js';
 export { IxDropdown, defineCustomElement as defineCustomElementIxDropdown } from './ix-dropdown.js';
 export { IxDropdownButton, defineCustomElement as defineCustomElementIxDropdownButton } from './ix-dropdown-button.js';
 export { IxDropdownItem, defineCustomElement as defineCustomElementIxDropdownItem } from './ix-dropdown-item.js';
+export { IxDropdownQuickActions, defineCustomElement as defineCustomElementIxDropdownQuickActions } from './ix-dropdown-quick-actions.js';
 export { IxEventList, defineCustomElement as defineCustomElementIxEventList } from './ix-event-list.js';
 export { IxEventListItem, defineCustomElement as defineCustomElementIxEventListItem } from './ix-event-list-item.js';
 export { IxExpandingSearch, defineCustomElement as defineCustomElementIxExpandingSearch } from './ix-expanding-search.js';
@@ -64,14 +67,16 @@ export { IxTimePicker, defineCustomElement as defineCustomElementIxTimePicker }
 export { IxToast, defineCustomElement as defineCustomElementIxToast } from './ix-toast.js';
 export { IxToastContainer, defineCustomElement as defineCustomElementIxToastContainer } from './ix-toast-container.js';
 export { IxToggle, defineCustomElement as defineCustomElementIxToggle } from './ix-toggle.js';
+export { IxTooltip, defineCustomElement as defineCustomElementIxTooltip } from './ix-tooltip.js';
 export { IxTreeItem, defineCustomElement as defineCustomElementIxTreeItem } from './ix-tree-item.js';
+export { IxTypography, defineCustomElement as defineCustomElementIxTypography } from './ix-typography.js';
 export { IxValidationTooltip, defineCustomElement as defineCustomElementIxValidationTooltip } from './ix-validation-tooltip.js';
 export { IxWorkflowStep, defineCustomElement as defineCustomElementIxWorkflowStep } from './ix-workflow-step.js';
 export { IxWorkflowSteps, defineCustomElement as defineCustomElementIxWorkflowSteps } from './ix-workflow-steps.js';
 export { MyComponent, defineCustomElement as defineCustomElementMyComponent } from './my-component.js';
 
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -82,7 +87,7 @@ class FilterState {
 }
 
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/components/ix-basic-navigation.js

@@ -1,7 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './application-header.js';
+import { s as screenMode } from './service.js';
+import { d as defineCustomElement$3 } from './application-header.js';
+import { d as defineCustomElement$2 } from './burger-menu.js';
 
-const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:4rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}";
+const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:4rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}.mode-mobile.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{margin-left:0px;width:100%}";
 
 const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -9,10 +11,17 @@ const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.__registerHost();
     this.applicationName = undefined;
     this.hideHeader = false;
+    this.mode = 'desktop';
   }
   get menu() {
     return this.hostElement.querySelector('ix-menu');
   }
+  componentWillLoad() {
+    if (this.hideHeader === false) {
+      this.modeDisposable = screenMode.onChange.on((mode) => (this.mode = mode));
+      this.mode = screenMode.mode;
+    }
+  }
   componentDidRender() {
     if (this.menu) {
       this.appendMenu();
@@ -20,6 +29,10 @@ const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       this.menu.applicationName = this.applicationName;
     }
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+  }
   appendMenu() {
     this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
   }
@@ -29,21 +42,23 @@ const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
   }
   render() {
-    return (h(Host, { class: {
+    return (h(Host, { "data-role": "", class: {
         'hide-header': this.hideHeader,
+        [`mode-${this.mode}`]: true,
       } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo" }))) : null, h("div", { id: "menu-placeholder" }), h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get style() { return basicNavigationCss; }
 }, [6, "ix-basic-navigation", {
     "applicationName": [1, "application-name"],
-    "hideHeader": [4, "hide-header"]
+    "hideHeader": [4, "hide-header"],
+    "mode": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-basic-navigation", "ix-application-header"];
+  const components = ["ix-basic-navigation", "ix-application-header", "ix-burger-menu"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-basic-navigation":
       if (!customElements.get(tagName)) {
@@ -51,6 +66,11 @@ function defineCustomElement$1() {
       }
       break;
     case "ix-application-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-burger-menu":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/ix-burger-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxBurgerMenu extends Components.IxBurgerMenu, HTMLElement {}
+export const IxBurgerMenu: {
+  prototype: IxBurgerMenu;
+  new (): IxBurgerMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-burger-menu.js

@@ -0,0 +1,6 @@
+import { B as BurgerMenu, d as defineCustomElement$1 } from './burger-menu.js';
+
+const IxBurgerMenu = BurgerMenu;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxBurgerMenu, defineCustomElement };

package/dist/components/ix-category-filter.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -23,7 +23,7 @@ class InputState {
 }
 
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -377,7 +377,7 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { class: {
         'text-input': true,
         'hide-placeholder': this.category !== undefined,
-      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder }))), this.getResetButton())), h("ix-dropdown", { closeBehavior: "outside", trigger: this.textInput, header: this.getDropdownHeader(), class: { 'd-none': !this.displayDropdown() } }, this.renderDropdownContent())));
+      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder }))), this.getResetButton())), h("ix-dropdown", { closeBehavior: "outside", trigger: this.textInput, triggerEvent: ['click', 'focus'], header: this.getDropdownHeader(), class: { 'd-none': !this.displayDropdown() } }, this.renderDropdownContent())));
   }
   get hostElement() { return this; }
   static get watchers() { return {

package/dist/components/ix-divider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxDivider extends Components.IxDivider, HTMLElement {}
+export const IxDivider: {
+  prototype: IxDivider;
+  new (): IxDivider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-divider.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dividerCss = ":host{display:block;position:initial}:host .line{width:auto;border:0.0625rem solid var(--theme-color-x-weak-bdr)}";
+
+const Divider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "line" })));
+  }
+  static get style() { return dividerCss; }
+}, [1, "ix-divider"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Divider);
+      }
+      break;
+  } });
+}
+
+const IxDivider = Divider;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDivider, defineCustomElement };

package/dist/components/ix-dropdown-button.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './dropdown.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
-const dropdownButtonCss = ".sc-ix-dropdown-button-h{display:inline-block;position:relative;height:2rem}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button{position:relative}.sc-ix-dropdown-button-h .hide.sc-ix-dropdown-button{display:none}.sc-ix-dropdown-button-h .triangle.sc-ix-dropdown-button{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-secondary--color--disabled)}.sc-ix-dropdown-button-h .hide.sc-ix-dropdown-button{display:none}.sc-ix-dropdown-button-h .dropdown.sc-ix-dropdown-button{width:auto !important;inset:auto !important;transform:unset !important}";
+const dropdownButtonCss = ".sc-ix-dropdown-button-h{display:inline-block;position:relative;height:2rem;width:auto}.disabled.sc-ix-dropdown-button-h{pointer-events:none}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button{display:block;position:relative;width:100%;height:100%}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button>ix-button.sc-ix-dropdown-button{width:100%;height:100%}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button .button-label.sc-ix-dropdown-button{margin-right:auto}.sc-ix-dropdown-button-h .triangle.sc-ix-dropdown-button{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-secondary--color--disabled)}.sc-ix-dropdown-button-h .dropdown.sc-ix-dropdown-button{width:auto !important;inset:auto !important;transform:unset !important}";
 
 const DropdownButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -31,9 +31,11 @@ const DropdownButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       } }));
   }
   render() {
-    return (h(Host, null, h("div", { class: "dropdown-button", ref: (ref) => {
+    return (h(Host, { class: {
+        disabled: this.disabled,
+      } }, h("div", { class: "dropdown-button", ref: (ref) => {
         this.dropdownAnchor = ref;
-      } }, h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, class: { hide: this.label === '' } }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), this.label, h("ix-icon", { name: "chevron-down-small", size: "24" })), h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, class: { hide: this.label !== '' } }), this.getTriangle()), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("slot", null))));
+      } }, this.label !== '' ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: "chevron-down-small", size: "24" }))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("slot", null))));
   }
   static get style() { return dropdownButtonCss; }
 }, [6, "ix-dropdown-button", {

package/dist/components/ix-dropdown-quick-actions.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxDropdownQuickActions extends Components.IxDropdownQuickActions, HTMLElement {}
+export const IxDropdownQuickActions: {
+  prototype: IxDropdownQuickActions;
+  new (): IxDropdownQuickActions;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-dropdown-quick-actions.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;-webkit-margin-end:0.625rem;margin-inline-end:0.625rem}";
+
+const DropdownQuickActions = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return dropdownQuickActionsCss; }
+}, [1, "ix-dropdown-quick-actions"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-dropdown-quick-actions"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-dropdown-quick-actions":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DropdownQuickActions);
+      }
+      break;
+  } });
+}
+
+const IxDropdownQuickActions = DropdownQuickActions;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdownQuickActions, defineCustomElement };

package/dist/components/ix-event-list-item.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected:not(:active,.active) .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item.selected:not(:active,.active) :hover{border-color:var(--theme-event-item--border--selected) !important}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.ix-event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}";
+const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.ix-event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}";
 
 const EventListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/ix-flip-tile.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/components/ix-group.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './group-item.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
-const groupCss = ".sc-ix-group-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}.sc-ix-group-h .group-header.sc-ix-group{height:4rem;min-height:4rem;max-height:4rem;border-radius:0.25rem;border:var(--theme-std-bdr-1);display:flex;background-color:var(--theme-group-item--background);border:1px solid var(--theme-group-item--border-color);color:var(--theme-group-header--color);cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color);border-radius:var(--theme-group--border-radius--focus);outline:none}.sc-ix-group-h .group-header-clickable.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}.sc-ix-group-h .group-header.expand.sc-ix-group{border-bottom-left-radius:0;border-bottom-right-radius:0}.sc-ix-group-h .group-header-selection-indicator.sc-ix-group{width:0.25rem}.sc-ix-group-h .group-header-content.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;padding:0.5rem;padding-left:0;width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-props-container.sc-ix-group{width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group>*.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sc-ix-group-h .group-header-content.sc-ix-group .group-subheader.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}.sc-ix-group-h .expand-icon.sc-ix-group{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}.sc-ix-group-h .btn-expand-header.sc-ix-group{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-group-h .group-content.sc-ix-group{display:flex;flex-direction:column}.sc-ix-group-h .group-header.selected.sc-ix-group{border:var(--theme-primary-bdr-2);background-color:var(--theme-group-item--background--selected)}.sc-ix-group-h .group-header.selected.sc-ix-group .group-header-selection-indicator.sc-ix-group{background-color:var(--theme-color-input--focus)}.sc-ix-group-h .footer.sc-ix-group{height:auto;min-height:0}";
+const groupCss = ".sc-ix-group-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}.sc-ix-group-h .group-header.sc-ix-group{height:4rem;min-height:4rem;max-height:4rem;border-radius:0.25rem;display:flex;background-color:var(--theme-group-item--background);border:1px solid var(--theme-group-item--border-color);color:var(--theme-group-header--color);cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color);border-radius:var(--theme-group--border-radius--focus);outline:none}.sc-ix-group-h .group-header.selected.sc-ix-group{border:var(--theme-primary-bdr-2);background-color:var(--theme-group-item--background--selected)}.sc-ix-group-h .group-header.sc-ix-group .group-header-selection-indicator.sc-ix-group{background-color:var(--theme-color-input--focus)}.sc-ix-group-h .group-header-clickable.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}.sc-ix-group-h .group-header.expand.sc-ix-group{border-bottom-left-radius:0;border-bottom-right-radius:0}.sc-ix-group-h .group-header-selection-indicator.sc-ix-group{width:0.25rem}.sc-ix-group-h .group-header-content.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;padding:0.5rem;padding-left:0;width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-props-container.sc-ix-group{width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group>*.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sc-ix-group-h .group-header-content.sc-ix-group .group-subheader.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}.sc-ix-group-h .expand-icon.sc-ix-group{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}.sc-ix-group-h .btn-expand-header.sc-ix-group{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-group-h .group-content.sc-ix-group{display:flex;flex-direction:column}.sc-ix-group-h .footer.sc-ix-group{height:auto;min-height:0}";
 
 const Group = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() { super(); this.__registerHost(); this.selectGroup = createEvent(this, "selectGroup", 7); this.selectItem = createEvent(this, "selectItem", 7); this.collapsedChanged = createEvent(this, "collapsedChanged", 7); this.suppressHeaderSelection = false; this.header = undefined; this.subHeader = undefined; this.collapsed = true; this.selected = undefined; this.index = undefined; this.expandOnHeaderClick = false; this.dropdownTriggerRef = undefined; }

package/dist/components/ix-map-navigation.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as anime } from './anime.es.js';
-import { d as defineCustomElement$5 } from './application-header.js';
+import { d as defineCustomElement$6 } from './application-header.js';
+import { d as defineCustomElement$5 } from './burger-menu.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './map-navigation-overlay.js';
@@ -156,7 +157,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-map-navigation", "ix-application-header", "ix-icon", "ix-icon-button", "ix-map-navigation-overlay"];
+  const components = ["ix-map-navigation", "ix-application-header", "ix-burger-menu", "ix-icon", "ix-icon-button", "ix-map-navigation-overlay"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-map-navigation":
       if (!customElements.get(tagName)) {
@@ -164,6 +165,11 @@ function defineCustomElement$1() {
       }
       break;
     case "ix-application-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-burger-menu":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }

package/dist/components/ix-menu-avatar.js

@@ -4,8 +4,23 @@ import { d as defineCustomElement$4 } from './dropdown-item.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './menu-avatar-item.js';
 
-const menuAvatarCss = ".sc-ix-menu-avatar-h{display:block;position:relative;margin-bottom:0.5rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar{display:flex;align-items:center;height:2.5rem;max-height:2.5rem;padding-left:0.25rem;margin-left:0.75rem;margin-right:0.75rem;transition:0.15s;border-radius:1.25rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar>svg.sc-ix-menu-avatar{height:2rem;width:2rem;min-height:2rem;min-width:2rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-background.sc-ix-menu-avatar{fill:var(--theme-avatar--background)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-person.sc-ix-menu-avatar{fill:var(--theme-color-4)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar .text-default-single.sc-ix-menu-avatar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}";
+const menuAvatarCss = ".sc-ix-menu-avatar-h{display:block;position:relative;margin-bottom:0.5rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar{display:flex;align-items:center;height:2.5rem;max-height:2.5rem;padding-left:0.25rem;margin-left:0.75rem;margin-right:0.75rem;transition:0.15s;border-radius:1.25rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar>.avatar-image.sc-ix-menu-avatar{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar>.avatar-initials.sc-ix-menu-avatar{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-background.sc-ix-menu-avatar{fill:var(--theme-avatar--background)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-person.sc-ix-menu-avatar{fill:var(--theme-color-4)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar .text-default-single.sc-ix-menu-avatar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}";
 
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+function DefaultAvatar(props) {
+  const { initials } = props;
+  if (initials) {
+    return h("div", { class: 'avatar-initials' }, initials);
+  }
+  return (h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))));
+}
 const MenuAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -14,10 +29,12 @@ const MenuAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.avatarElementId = 'ix-menu-avatar-id';
     this.top = undefined;
     this.bottom = undefined;
+    this.image = undefined;
+    this.initials = undefined;
     this.i18nLogout = 'Logout';
   }
   render() {
-    return (h(Host, null, h("li", { class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n                    16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n                  6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n                  9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n                  6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))), h("div", { class: "avatar-name" }, h("span", { class: "text-default-single", title: this.top }, this.top), h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { trigger: this.avatarElementId, placement: 'right-start', offset: {
+    return (h(Host, null, h("li", { class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId }, this.image ? (h("img", { src: this.image, class: "avatar-image" })) : (h(DefaultAvatar, { initials: this.initials })), h("div", { class: "avatar-name" }, h("span", { class: "text-default-single", title: this.top }, this.top), h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { trigger: this.avatarElementId, placement: 'right-start', offset: {
         mainAxis: 12,
       } }, h("slot", null), h("ix-menu-avatar-item", { label: this.i18nLogout, icon: "log-out", onClick: (e) => {
         this.logoutClick.emit(e);
@@ -28,6 +45,8 @@ const MenuAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [6, "ix-menu-avatar", {
     "top": [1],
     "bottom": [1],
+    "image": [1],
+    "initials": [1],
     "i18nLogout": [1, "i-1-8n-logout"]
   }]);
 function defineCustomElement$1() {

package/dist/components/ix-menu.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { m as menuController, h as hostContext, i as isBasicNavigationLayout, s as screenMode } from './service.js';
 import { a as convertToRemString } from './rwd.util.js';
 import { T as TypedEvent } from './typed-event.js';
+import { d as defineCustomElement$4 } from './burger-menu.js';
 import { d as defineCustomElement$3 } from './dropdown.js';
 import { d as defineCustomElement$2 } from './menu-item.js';
 
@@ -90,7 +92,7 @@ class ThemeSwitcher {
 }
 const themeSwitcher = new ThemeSwitcher();
 
-const menuCss = "ix-menu{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto}ix-menu .menu{display:flex;flex-direction:column;position:relative;width:4rem;height:100%;-webkit-padding-after:1rem;padding-block-end:1rem;background-color:var(--theme-nav--background);transition:width var(--animate-duration)}ix-menu .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}ix-menu .menu .burger-menu-button{display:flex;justify-content:center;margin-top:0.75rem;margin-left:0.75rem;margin-bottom:1rem;height:2rem;width:2.5rem;border-radius:0.25rem}ix-menu .menu .burger-menu-button:not(.disabled):not(:disabled).hover,ix-menu .menu .burger-menu-button:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}ix-menu .menu .burger-menu-button:not(.disabled):not(:disabled).active,ix-menu .menu .burger-menu-button:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}ix-menu .menu .burger-menu-button svg{display:inline-block;fill:var(--theme-menu-btn--color);position:relative}ix-menu .menu .burger-menu-button svg .line{opacity:1;transform:rotate(0) translateY(0) translateX(0);transition:transform 0.3s ease-in-out, opacity 0.2s ease-in-out}ix-menu .menu .burger-menu-button.expanded svg .line-1{transform:translate(0.6875rem, -0.05rem) rotate(45deg)}ix-menu .menu .burger-menu-button.expanded svg .line-2{opacity:0}ix-menu .menu .burger-menu-button.expanded svg .line-3{transform:translate(-0.75625rem, 0.8125rem) rotate(-45deg)}ix-menu .menu-overlay{display:block;position:absolute;width:calc(100vw - 4rem);height:100%;left:4rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:all 300ms ease-out}ix-menu .menu-overlay-invisible{display:none}ix-menu .menu.expanded{width:16rem}ix-menu .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}ix-menu #avatar-tab-placeholder{max-height:3rem}ix-menu .avatar{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}ix-menu #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}ix-menu .bottom-tab-divider{margin-top:auto}a[href]:has(>ix-menu-item){text-decoration:none}";
+const menuCss = "ix-menu{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto}ix-menu .menu{display:flex;flex-direction:column;position:relative;width:4rem;height:100%;-webkit-padding-after:1rem;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration)}ix-menu .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}ix-menu .menu .burger-menu{margin:0.75rem 0 1rem 0.75rem}ix-menu .menu-overlay{display:block;position:absolute;width:calc(100vw - 4rem);height:100%;left:4rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:all 300ms ease-out}ix-menu .menu-overlay-invisible{display:none}ix-menu .menu.expanded{width:16rem}ix-menu .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}ix-menu #avatar-tab-placeholder{max-height:3rem}ix-menu .avatar{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}ix-menu #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}ix-menu .bottom-tab-divider{margin-top:auto}ix-menu.mode-mobile .menu:not(.expanded){width:0}ix-menu.mode-mobile .menu{padding-top:2rem}ix-menu.mode-mobile .menu .burger-menu{display:none}ix-menu.mode-mobile .menu-overlay{left:0px;width:100vw}a[href]:has(>ix-menu-item){text-decoration:none}";
 
 const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -126,6 +128,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.mapExpand = true;
     this.activeTab = undefined;
     this.isMoreTabEmpty = false;
+    this.mode = 'desktop';
   }
   onWindowResize() {
     this.visibleMenuItems = this.getMaxTabCount();
@@ -163,7 +166,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.hostElement.querySelector('.menu');
   }
   get menuItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab)')).filter(this.isVisible);
+    return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible);
   }
   get menuBottomItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)')).filter(this.isVisible);
@@ -245,7 +248,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       subtree: true,
     });
   }
-  disconnectedCallback() { }
+  componentWillLoad() {
+    menuController.register(this.hostElement);
+    const layout = hostContext('ix-basic-navigation', this.hostElement);
+    if (isBasicNavigationLayout(layout) && layout.hideHeader === false) {
+      screenMode.onChange.on((mode) => (this.mode = mode));
+      this.mode = screenMode.mode;
+    }
+  }
   componentWillRender() {
     this.appendTabs();
   }
@@ -272,7 +282,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.activeTab = null;
     if (this.homeTab) {
       this.hostElement.querySelector('.tabs-top').appendChild(this.homeTab);
-      this.homeTab.addEventListener('click', this.resetOverlay);
+      this.homeTab.addEventListener('click', this.resetOverlay.bind(this));
     }
     this.menuItems.forEach((item, index) => {
       var _a;
@@ -287,7 +297,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       // TODO: Find better solution to handle home tab
       (_a = this.homeTab) === null || _a === void 0 ? void 0 : _a.classList.remove('d-none');
-      item.addEventListener('click', this.resetOverlay);
+      item.addEventListener('click', this.resetOverlay.bind(this));
     });
   }
   appendAvatar() {
@@ -500,6 +510,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.about) {
       this.about.show = this.showAbout;
     }
+    this.toggleMenu(false);
   }
   showMoreButton() {
     const menuItemCount = this.menuItems.length;
@@ -532,15 +543,15 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     return (h(Host, { class: {
         expanded: this.expand,
+        [`mode-${this.mode}`]: true,
       } }, 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: {
+      } }, h("ix-burger-menu", { onClick: async () => this.toggleMenu(), expanded: this.expand, class: {
+        'burger-menu': true,
+      } }), h("div", { id: "avatar-tab-placeholder" }), h("div", { id: "menu-tabs", style: {
         display: 'contents',
       }, onClick: (event) => {
         if (this.isMenuItemClicked(event)) {
@@ -555,7 +566,10 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       !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));
+      return (h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, class: "internal-tab appended", onClick: () => {
+          this.resetOverlay();
+          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,
@@ -596,6 +610,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "mapExpand": [32],
     "activeTab": [32],
     "isMoreTabEmpty": [32],
+    "mode": [32],
     "toggleMapExpand": [64],
     "toggleMenu": [64],
     "toggleSettings": [64],
@@ -605,13 +620,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-menu", "ix-dropdown", "ix-menu-item"];
+  const components = ["ix-menu", "ix-burger-menu", "ix-dropdown", "ix-menu-item"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-menu":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Menu);
       }
       break;
+    case "ix-burger-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
     case "ix-dropdown":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();