@siemens/ix 1.0.0-beta.2

package/dist/components/ix-group.js

@@ -0,0 +1,174 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './dropdown.js';
+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-context-button.sc-ix-group{display:block;position:relative;margin-top:5px;margin-right:5px;margin-left:auto}.sc-ix-group-h .group-header-context-button.sc-ix-group ix-icon-button.sc-ix-group::after{display:none}.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 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);
+    /**
+     * Prevent header from being selectable
+     */
+    this.suppressHeaderSelection = false;
+    /**
+     * Whether the group is collapsed or expanded. Defaults to true.
+     */
+    this.collapsed = true;
+    /**
+     * Expand the group if the header is clicked
+     */
+    this.expandOnHeaderClick = false;
+  }
+  get dropdownItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
+  }
+  get groupItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
+  }
+  get groupContent() {
+    return this.hostElement.querySelector('.group-content');
+  }
+  get footer() {
+    return this.hostElement.querySelector('.footer');
+  }
+  async onKeyDown(event) {
+    const targetElement = event.target;
+    if (!this.hostElement.contains(targetElement)) {
+      return;
+    }
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      if (targetElement.classList.contains('group-header')) {
+        if (this.suppressHeaderSelection) {
+          this.collapsed = !this.collapsed;
+        }
+        else {
+          this.selected = !this.selected;
+        }
+      }
+      else if (targetElement.matches('ix-group-item')) {
+        const groupItem = targetElement;
+        groupItem.selected = !groupItem.selected;
+      }
+    }
+  }
+  onExpandClick(event) {
+    const wasCollapsed = this.collapsed;
+    this.collapsed = !this.collapsed;
+    if (!wasCollapsed && this.index !== undefined) {
+      this.index = undefined;
+      this.setGroupSelection(true);
+    }
+    this.collapsedChanged.emit(this.collapsed);
+    event.stopPropagation();
+  }
+  onHeaderClick(event) {
+    this.setGroupSelection(!this.selected);
+    if (this.suppressHeaderSelection) {
+      this.onExpandClick(event);
+    }
+  }
+  onItemClick(index) {
+    if (index === this.index) {
+      this.index = undefined;
+      this.selectItem.emit(undefined);
+    }
+    else {
+      this.index = index;
+      this.selectItem.emit(index);
+    }
+    this.setGroupSelection(false);
+  }
+  setGroupSelection(selection) {
+    if (!this.suppressHeaderSelection) {
+      this.selected = selection;
+      this.selectGroup.emit(this.selected);
+    }
+  }
+  componentWillRender() {
+    var _a;
+    this.groupItems.forEach((item, index) => {
+      var _a;
+      item.selected = index === this.index;
+      item.index = index;
+      item.classList.remove('last');
+      if (!((_a = this.footer) === null || _a === void 0 ? void 0 : _a.children.length) &&
+        index === this.groupItems.length - 1) {
+        item.classList.add('last');
+      }
+    });
+    if (((_a = this.footer) === null || _a === void 0 ? void 0 : _a.childElementCount) > 1) {
+      this.groupContent.appendChild(this.footer);
+    }
+  }
+  componentDidLoad() {
+    this.groupContent.addEventListener('selectedChanged', (evt) => {
+      this.onItemClick(evt.detail.index);
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'group-header': true,
+        expand: !this.collapsed,
+        selected: this.selected,
+      }, tabindex: "0" }, h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { class: "group-header-selection-indicator" }), h("ix-icon", { class: "btn-expand-header", name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) }), h("div", { class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { name: "header" }))), h("div", { class: { 'group-header-context-button': true, 'd-none': false } }, h("ix-icon-button", { ref: (ref) => (this.dropdownTriggerRef = ref), size: "24", ghost: true, icon: "context-menu" }), h("ix-dropdown", { trigger: this.dropdownTriggerRef }, h("slot", { name: "dropdown" })))), h("div", { class: {
+        'group-content': true,
+        'd-none': this.collapsed,
+      } }, h("slot", null)), h("div", { class: "d-none" }, h("ix-group-item", { class: "footer last", suppressSelection: true, focusable: false }, h("slot", { name: "footer" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return groupCss; }
+}, [6, "ix-group", {
+    "suppressHeaderSelection": [4, "suppress-header-selection"],
+    "header": [1],
+    "subHeader": [1, "sub-header"],
+    "collapsed": [1540],
+    "selected": [1540],
+    "index": [1538],
+    "expandOnHeaderClick": [4, "expand-on-header-click"],
+    "dropdownTriggerRef": [32]
+  }, [[8, "keydown", "onKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-group", "ix-dropdown", "ix-group-item", "ix-icon", "ix-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Group);
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-group-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxGroup = Group;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxGroup, defineCustomElement };

package/dist/components/ix-icon-button.d.ts

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

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

@@ -0,0 +1,6 @@
+import { I as IconButton, d as defineCustomElement$1 } from './icon-button.js';
+
+const IxIconButton = IconButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxIconButton, defineCustomElement };

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

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

package/dist/components/ix-icon.js

@@ -0,0 +1,6 @@
+import { I as Icon, d as defineCustomElement$1 } from './icon.js';
+
+const IxIcon = Icon;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxIcon, defineCustomElement };

package/dist/components/ix-input-group.d.ts

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

package/dist/components/ix-input-group.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const inputGroupCss = ".sc-ix-input-group-h{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.sc-ix-input-group-h .group.sc-ix-input-group{display:flex;position:absolute;align-items:center;height:100%}.sc-ix-input-group-h .group-start.sc-ix-input-group{left:0px}.sc-ix-input-group-h .group-end.sc-ix-input-group{right:0px}";
+
+const InputGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidRender() {
+    let paddingRight = 15;
+    let paddingLeft = 15;
+    this.host.querySelectorAll('[slot="input-end"]').forEach((item) => {
+      item.classList.add('input-group-label');
+      paddingRight += item.getBoundingClientRect().width;
+    });
+    this.host.querySelectorAll('[slot="input-start"]').forEach((item) => {
+      item.classList.add('input-group-label');
+      paddingLeft += item.getBoundingClientRect().width;
+    });
+    const inputElement = this.host.querySelector('input.form-control');
+    if (inputElement) {
+      inputElement.style.paddingRight = paddingRight + 'px';
+      inputElement.style.paddingLeft = paddingLeft + 'px';
+    }
+    else {
+      console.warn('You used the ix-input-group without an input-tag, e.g <input class="form-control" />');
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start" })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end" }))));
+  }
+  get host() { return this; }
+  static get style() { return inputGroupCss; }
+}, [6, "ix-input-group"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-input-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-input-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InputGroup);
+      }
+      break;
+  } });
+}
+
+const IxInputGroup = InputGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxInputGroup, defineCustomElement };

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

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

package/dist/components/ix-kpi.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const kpiCss = ".sc-ix-kpi-h{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}.sc-ix-kpi-h span.sc-ix-kpi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-kpi-h .kpi-container.sc-ix-kpi{display:flex;height:100%;width:100%;-webkit-border-after:2px solid grey;border-block-end:2px solid grey}.sc-ix-kpi-h .kpi-container.alarm.sc-ix-kpi{border-block-end-color:var(--theme-color-alarm)}.sc-ix-kpi-h .kpi-container.warning.sc-ix-kpi{border-block-end-color:var(--theme-color-warning)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi ix-icon.sc-ix-kpi{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-value-container.sc-ix-kpi{display:flex;align-items:flex-end}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-value.sc-ix-kpi{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-unit.sc-ix-kpi{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi,.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-unit.sc-ix-kpi{-webkit-margin-before:0.125rem;margin-block-start:0.125rem}.stacked.sc-ix-kpi-h{height:3.75rem}.stacked.sc-ix-kpi-h .kpi-container.sc-ix-kpi{justify-content:center;flex-wrap:wrap}.stacked.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi{width:100%;justify-content:center}.sc-ix-kpi-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-kpi-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}.sc-ix-kpi-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-kpi-h:not(.disabled):not(:disabled):active{background-color:var(--theme-kpi-display--background--active)}.sc-ix-kpi-h:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}";
+
+const Kpi = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     *
+     */
+    this.state = 'neutral';
+    /**
+     *
+     */
+    this.orientation = 'horizontal';
+  }
+  getStateIcon() {
+    switch (this.state) {
+      case 'alarm':
+        return (h("ix-icon", { color: "kpi-display-icon--color", name: "alarm", size: "16" }));
+      case 'warning':
+        return (h("ix-icon", { color: "kpi-display-icon--color", name: "warning", size: "16" }));
+      default:
+        return '';
+    }
+  }
+  getTooltipText() {
+    let tooltip = `${this.label}: ${this.value}`;
+    if (this.unit) {
+      tooltip = tooltip.concat(` ${this.unit}`);
+    }
+    return tooltip;
+  }
+  render() {
+    return (h(Host, { title: this.getTooltipText(), tabindex: "1", class: {
+        stacked: this.orientation === 'vertical',
+      } }, h("div", { class: {
+        'kpi-container': true,
+        alarm: this.state === 'alarm',
+        warning: this.state === 'warning',
+      } }, h("span", { class: "kpi-label" }, this.getStateIcon(), h("span", { class: "kpi-label-text" }, this.label)), h("span", { class: "kpi-value-container" }, h("span", { class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+  }
+  static get style() { return kpiCss; }
+}, [2, "ix-kpi", {
+    "label": [1],
+    "value": [8],
+    "unit": [1],
+    "state": [1],
+    "orientation": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-kpi", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-kpi":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Kpi);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxKpi = Kpi;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxKpi, defineCustomElement };

package/dist/components/ix-map-navigation-overlay.d.ts

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

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

@@ -0,0 +1,6 @@
+import { M as MapNavigationOverlay, d as defineCustomElement$1 } from './map-navigation-overlay.js';
+
+const IxMapNavigationOverlay = MapNavigationOverlay;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMapNavigationOverlay, defineCustomElement };

package/dist/components/ix-map-navigation.d.ts

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

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

@@ -0,0 +1,227 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './icon-button.js';
+import { d as defineCustomElement$5 } from './map-navigation-overlay.js';
+import { d as defineCustomElement$4 } from './menu-about.js';
+import { d as defineCustomElement$3 } from './tab-item.js';
+import { d as defineCustomElement$2 } from './tabs.js';
+
+const mapNavigationCss = ".sc-ix-map-navigation-h{display:flex;position:relative;width:100%;height:100%}.sc-ix-map-navigation-h .map-nav.sc-ix-map-navigation{display:flex;margin-left:4rem;position:relative;height:100%;flex-grow:1;overflow:hidden}.sc-ix-map-navigation-h .map-nav-sidebar.sc-ix-map-navigation{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-color-1);-webkit-border-end:1px solid var(--theme-map-navigation-separator--background);border-inline-end:1px solid var(--theme-map-navigation-separator--background);z-index:99}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation{align-items:center;position:relative;overflow:auto;height:100%;width:100%}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation .map-nav-sidebar-static-content.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation button.sc-ix-map-navigation{margin-left:1rem}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation .map-nav-brand-logo.sc-ix-map-navigation{min-width:4.75rem;-webkit-margin-end:3.5rem;margin-inline-end:3.5rem}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation .map-nav-brand-title.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-map-navigation-header--color);flex-grow:1}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation:empty{height:0}.sc-ix-map-navigation-h .map-nav-title.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;align-items:center;flex-grow:1}.sc-ix-map-navigation-h .content.sc-ix-map-navigation{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}.sc-ix-map-navigation-h #overlay.sc-ix-map-navigation{width:100%;height:100%;position:absolute;top:0;z-index:calc(var(--theme-z-index-sticky) + 1)}";
+
+const MapNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.navigationToggled = createEvent(this, "navigationToggled", 7);
+    this.contextMenuClick = createEvent(this, "contextMenuClick", 7);
+    /**
+     * Hide the sidebar context menu button when set to true
+     */
+    this.hideContextMenu = true;
+    this.isSidebarOpen = true;
+  }
+  get menu() {
+    return this.hostElement.querySelector('ix-menu');
+  }
+  get menuOverlay() {
+    return this.hostElement.querySelector('ix-menu-overlay');
+  }
+  get about() {
+    return this.hostElement.querySelector('ix-menu-about');
+  }
+  get aboutItems() {
+    return this.hostElement.querySelector('ix-menu-about-item');
+  }
+  get settings() {
+    return this.hostElement.querySelector('ix-menu-settings');
+  }
+  get settingsItems() {
+    return this.hostElement.querySelector('ix-menu-settings-item');
+  }
+  get mapNavMenu() {
+    return this.hostElement.querySelector('.map-nav-menu');
+  }
+  get sidebar() {
+    return this.hostElement.querySelector('.map-nav-sidebar');
+  }
+  get overlay() {
+    return this.hostElement.querySelector('#overlay');
+  }
+  componentDidRender() {
+    this.appendMenu();
+    this.appendAbout();
+    this.appendSettings();
+    // this.openOverlay('Test', document.createElement('ix-breadcrumb'), 'info', 'color-warning');
+    this.closeOverlay();
+  }
+  appendMenu() {
+    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
+    this.menu.addEventListener('mapExpandChange', (event) => {
+      const state = !event.detail;
+      this.toggleSidebar(state);
+      this.menu.toggleMapExpand(state);
+    });
+    this.menu.enableMapExpand = true;
+  }
+  appendAbout() {
+    const about = this.about || document.createElement('ix-menu-about');
+    about.append(this.aboutItems);
+    this.menu.appendChild(about);
+  }
+  appendSettings() {
+    if (this.menu.enableSettings && this.settings) {
+      this.menu.appendChild(this.settings);
+      this.settings.append(this.settingsItems);
+    }
+  }
+  toggleSidebar(show) {
+    if (show !== undefined) {
+      this.isSidebarOpen = show;
+    }
+    else {
+      this.isSidebarOpen = !this.isSidebarOpen;
+    }
+    if (show) {
+      this.openSidebar();
+    }
+    else {
+      this.closeSidebar();
+    }
+    this.navigationToggled.emit(this.isSidebarOpen);
+  }
+  closeSidebar() {
+    anime({
+      targets: this.sidebar,
+      duration: MapNavigation.defaultTime,
+      marginLeft: [0, '-29.75rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        this.sidebar.classList.add('d-none');
+      },
+    });
+  }
+  openSidebar() {
+    anime({
+      targets: this.sidebar,
+      duration: MapNavigation.defaultTime,
+      marginLeft: ['-29.75rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        this.sidebar.classList.remove('d-none');
+      },
+    });
+  }
+  /**
+   * Open a overlay inside content area
+   *
+   * @param name
+   * @param component
+   * @param icon
+   * @param color
+   */
+  async openOverlay(name, component, icon, color) {
+    anime({
+      targets: this.overlay,
+      duration: MapNavigation.slowTime,
+      backdropFilter: [0, 'blur(1rem)'],
+      translateX: ['-4rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        this.overlay.classList.remove('d-none');
+      },
+    });
+    const overlayInstance = document.createElement('ix-map-navigation-overlay');
+    overlayInstance.setAttribute('color', color);
+    overlayInstance.setAttribute('name', name);
+    overlayInstance.setAttribute('icon', icon);
+    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());
+    overlayInstance.appendChild(component);
+    this.overlay.appendChild(overlayInstance);
+  }
+  /**
+   * Close current shown overlay
+   */
+  async closeOverlay() {
+    anime({
+      targets: this.overlay,
+      duration: MapNavigation.slowTime,
+      backdropFilter: ['blur(1rem)', 0],
+      translateX: [0, '-4rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        var _a;
+        (_a = this.overlay.firstChild) === null || _a === void 0 ? void 0 : _a.remove();
+        this.overlay.classList.add('d-none');
+      },
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { id: "menu-placeholder" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("div", { class: "map-nav-header-brand" }, h("div", { class: "map-nav-brand-logo" }, h("slot", { name: "logo" })), h("span", { class: "map-nav-brand-title" }, this.applicationName))), h("div", { class: "map-nav-sidebar-content" }, h("div", { class: "map-nav-sidebar-static-content" }, h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: "context-menu", ghost: true, size: "24", variant: "Secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { class: "map-nav-sidebar-user-content" }, h("slot", { name: "sidebar-content" })))), h("div", { class: "content" }, h("div", { class: "map-nav-header-content bg-2" }, h("slot", { name: "content-header" })), h("main", null, h("slot", null)), h("div", { id: "overlay" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return mapNavigationCss; }
+}, [6, "ix-map-navigation", {
+    "applicationName": [1, "application-name"],
+    "navigationTitle": [1, "navigation-title"],
+    "hideContextMenu": [4, "hide-context-menu"],
+    "isSidebarOpen": [32],
+    "isAboutOpen": [32],
+    "isSettingsOpen": [32],
+    "openOverlay": [64],
+    "closeOverlay": [64]
+  }]);
+MapNavigation.defaultTime = 150;
+MapNavigation.slowTime = 500;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-map-navigation", "ix-icon", "ix-icon-button", "ix-map-navigation-overlay", "ix-menu-about", "ix-tab-item", "ix-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-map-navigation":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapNavigation);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-map-navigation-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-menu-about":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-tab-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxMapNavigation = MapNavigation;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMapNavigation, defineCustomElement };

package/dist/components/ix-menu-about-item.d.ts

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