@siemens/ix 1.1.0-beta.5 → 1.1.0

package/dist/components/ix-expanding-search.js

@@ -9,17 +9,8 @@ const ExpandingSearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.valueChange = createEvent(this, "valueChange", 7);
-    /**
-     * Search icon
-     */
     this.icon = 'search';
-    /**
-     * Placeholder text
-     */
     this.placeholder = 'Enter text here';
-    /**
-     * Default value
-     */
     this.value = '';
     this.isFieldChanged = false;
     this.expanded = false;

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

@@ -1,8 +1,24 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { F as FlipTileState } from './flip-tile-state.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+var FlipTileState;
+(function (FlipTileState) {
+  FlipTileState["None"] = "None";
+  FlipTileState["Info"] = "Info";
+  FlipTileState["Warning"] = "Warning";
+  FlipTileState["Alarm"] = "Alarm";
+  FlipTileState["Primary"] = "Primary";
+})(FlipTileState || (FlipTileState = {}));
+
 const flipTileCss = "@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}.sc-ix-flip-tile-h{display:flex;flex-direction:column;width:16rem;min-width:16rem;max-width:16rem;height:15.125rem;perspective:1000px}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile .header-slot-container.sc-ix-flip-tile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}.sc-ix-flip-tile-h .content-container.sc-ix-flip-tile{flex-grow:1;margin:1rem}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}.sc-ix-flip-tile-h .flip-tile-container.flip-animation-active.sc-ix-flip-tile{animation:flip-animation 300ms, ease-in-out}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile .sc-ix-flip-tile:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}.sc-ix-flip-tile-h .flip-tile-container .sc-ix-flip-tile-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile{border-color:var(--theme-color-primary)}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile{border-color:var(--theme-color-info)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile{border-color:var(--theme-color-warning)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile{border-color:var(--theme-color-alarm)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}.sc-ix-flip-tile-h:hover .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile ix-icon.sc-ix-flip-tile{color:var(--theme-color-std-text)}";
 
 const FlipTile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -11,6 +27,9 @@ const FlipTile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.ANIMATION_DURATION = 150;
     this.index = 0;
+    this.isFlipAnimationActive = undefined;
+    this.state = undefined;
+    this.footer = undefined;
   }
   componentDidLoad() {
     this.contentItems = this.contentContainerElement.querySelectorAll('ix-flip-tile-content');
@@ -93,4 +112,4 @@ function defineCustomElement$1() {
 const IxFlipTile = FlipTile;
 const defineCustomElement = defineCustomElement$1;
 
-export { IxFlipTile, defineCustomElement };
+export { FlipTileState as F, IxFlipTile, defineCustomElement };

package/dist/components/ix-group-dropdown-item.js

@@ -8,6 +8,8 @@ const GroupDropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   constructor() {
     super();
     this.__registerHost();
+    this.label = undefined;
+    this.icon = undefined;
   }
   render() {
     return (h(Host, null, h("ix-dropdown-item", { label: this.label, icon: this.icon }, h("slot", null))));

package/dist/components/ix-group.js

@@ -7,25 +7,7 @@ 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;
-  }
+  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; }
   get dropdownItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
   }

package/dist/components/ix-kpi.js

@@ -7,13 +7,10 @@ const Kpi = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     *
-     */
+    this.label = undefined;
+    this.value = undefined;
+    this.unit = undefined;
     this.state = 'neutral';
-    /**
-     *
-     */
     this.orientation = 'horizontal';
   }
   getStateIcon() {

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

@@ -4,7 +4,7 @@ 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';
 
-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 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-map-navigation--background);-webkit-border-end:0.125rem solid var(--theme-map-navigation-separator--background);border-inline-end:0.125rem 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)}";
 
 const MapNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,9 +12,8 @@ const MapNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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.applicationName = undefined;
+    this.navigationTitle = undefined;
     this.hideContextMenu = true;
     this.isSidebarOpen = true;
   }
@@ -35,7 +34,6 @@ const MapNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   componentDidRender() {
     this.appendMenu();
-    // this.openOverlay('Test', document.createElement('ix-breadcrumb'), 'info', 'color-warning');
     this.closeOverlay();
   }
   appendMenu() {
@@ -88,6 +86,7 @@ const MapNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /**
    * Open a overlay inside content area
+   * @deprecated will get removed with next major release in favor of slot based approach
    *
    * @param name
    * @param component
@@ -116,6 +115,7 @@ const MapNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /**
    * Close current shown overlay
+   * @deprecated will get removed with next major release in favor of slot based approach
    */
   async closeOverlay() {
     anime({
@@ -127,13 +127,16 @@ const MapNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       easing: 'easeInSine',
       complete: () => {
         var _a;
+        if (!this.overlay) {
+          return;
+        }
         (_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" })))));
+    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))))));
   }
   get hostElement() { return this; }
   static get style() { return mapNavigationCss; }

package/dist/components/ix-menu-about-item.js

@@ -6,6 +6,7 @@ const MenuAboutItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
+    this.label = undefined;
   }
   render() {
     return (h(Host, null, h("slot", null)));

package/dist/components/ix-menu-about-news.js

@@ -10,21 +10,11 @@ const MenuAboutNews = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.showMore = createEvent(this, "showMore", 7);
     this.closePopover = createEvent(this, "closePopover", 7);
-    /**
-     * Show about news
-     */
     this.show = false;
-    /**
-     *
-     */
+    this.label = undefined;
     this.i18nShowMore = 'Show more';
-    /**
-     * Bottom offset
-     */
+    this.aboutItemLabel = undefined;
     this.offsetBottom = 0;
-    /**
-     * Internal
-     */
     this.expanded = false;
   }
   render() {

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

@@ -11,13 +11,8 @@ const MenuAbout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.close = createEvent(this, "close", 7);
-    /**
-     * Label of first tab
-     */
+    this.activeTabLabel = undefined;
     this.label = 'About & legal information';
-    /**
-     * Internal
-     */
     this.show = false;
     this.labels = [];
   }

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

@@ -12,9 +12,9 @@ const MenuAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.logoutClick = createEvent(this, "logoutClick", 7);
-    /**
-     *
-     */
+    this.displayMenu = undefined;
+    this.top = undefined;
+    this.bottom = undefined;
     this.i18nLogout = 'Logout';
   }
   toggleMenu() {

package/dist/components/ix-menu-settings-item.js

@@ -6,6 +6,7 @@ const MenuSettingsItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   constructor() {
     super();
     this.__registerHost();
+    this.label = undefined;
   }
   render() {
     return (h(Host, null, h("slot", null)));

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

@@ -11,13 +11,8 @@ const MenuAbout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.close = createEvent(this, "close", 7);
-    /**
-     * Label
-     */
+    this.activeTabLabel = undefined;
     this.label = 'Settings';
-    /**
-     * Internal
-     */
     this.show = false;
   }
   get settingsItems() {

package/dist/components/ix-menu.js

@@ -29,7 +29,7 @@ const toggleVariant = () => {
   document.body.classList.add(newTheme);
 };
 
-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%;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 150ms ease-out}ix-menu .menu-overlay-invisible{display:none}ix-menu :not(.active-more-tab)>.internal-tab:last-child{margin-bottom:1rem}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}";
+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 150ms 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}";
 
 const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -37,69 +37,34 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.expandChange = createEvent(this, "expandChange", 7);
     this.mapExpandChange = createEvent(this, "mapExpandChange", 7);
-    /**
-     * 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();

package/dist/components/ix-message-bar.js

@@ -10,14 +10,10 @@ const MessageBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.closedChange = createEvent(this, "closedChange", 7);
-    /**
-     * Specifies the type of the alert.
-     */
     this.type = 'info';
-    /**
-     * If true, close button is enabled and alert can be dismissed by the user
-     */
     this.dismissible = true;
+    this.icon = undefined;
+    this.color = undefined;
   }
   componentWillRender() {
     if (this.type === 'danger') {

package/dist/components/ix-modal-example.js

@@ -1,11 +1,47 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as dismissModal, c as closeModal } from './modal-utils.js';
 import { d as defineCustomElement$6 } from './button.js';
 import { d as defineCustomElement$5 } from './icon.js';
 import { d as defineCustomElement$4 } from './icon-button.js';
 import { d as defineCustomElement$3 } from './modal.js';
 import { d as defineCustomElement$2 } from './modal-container.js';
 
+/*
+ * SPDX-FileCopyrightText: 2022 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 getModalContainer() {
+  const containerList = Array.from(document.querySelectorAll('ix-modal-container'));
+  const [container] = containerList;
+  if (containerList.length > 1) {
+    console.warn('Multiple modal container are found. Only there first is used.');
+    return container;
+  }
+  if (!container) {
+    const modalContainer = document.createElement('ix-modal-container');
+    document.body.appendChild(modalContainer);
+    return modalContainer;
+  }
+  return container;
+}
+async function modal(config) {
+  const modalContainer = getModalContainer();
+  const modalInstance = await modalContainer.showModal(config);
+  return modalInstance;
+}
+function getIxModal(element) {
+  return element.closest('ix-modal');
+}
+function closeModal(element, closeResult) {
+  getIxModal(element).close(closeResult);
+}
+function dismissModal(element, dismissResult) {
+  getIxModal(element).dismiss(dismissResult);
+}
+
 const ModalExample = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -64,4 +100,4 @@ function defineCustomElement$1() {
 const IxModalExample = ModalExample;
 const defineCustomElement = defineCustomElement$1;
 
-export { IxModalExample, defineCustomElement };
+export { IxModalExample, closeModal as c, dismissModal as d, defineCustomElement, modal as m };

package/dist/components/ix-pill.js

@@ -7,17 +7,11 @@ const Pill = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Pill variant
-     */
     this.variant = 'primary';
-    /**
-     * Show pill as outline
-     */
     this.outline = false;
-    /**
-     * Align pill content left
-     */
+    this.icon = undefined;
+    this.background = undefined;
+    this.color = undefined;
     this.alignLeft = false;
   }
   render() {

package/dist/components/ix-select.js

@@ -14,45 +14,23 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.itemSelectionChange = createEvent(this, "itemSelectionChange", 7);
     this.addItem = createEvent(this, "addItem", 7);
-    /**
-     * Indices of selected items
-     */
     this.selectedIndices = [];
-    /**
-     * Show clear button
-     */
     this.allowClear = false;
-    /**
-     * Selection mode
-     */
     this.mode = 'single';
-    /**
-     * Select is extendable
-     */
     this.editable = false;
-    /**
-     * If true the select will be in disabled state
-     */
     this.disabled = false;
-    /**
-     * If true the select will be in readonly mode
-     */
     this.readonly = false;
-    /**
-     * Input field placeholder
-     */
     this.i18nPlaceholder = 'Select an option';
-    /**
-     * Input field placeholder for editable select
-     */
     this.i18nPlaceholderEditable = 'Type of select option';
-    /**
-     * Select list header
-     */
     this.i18nSelectListHeader = 'Please select an option';
     this.dropdownShow = false;
+    this.value = undefined;
+    this.dropdownWrapperRef = undefined;
+    this.dropdownAnchor = undefined;
     this.isDropdownEmpty = false;
     this.hasFocus = false;
+    this.navigationItem = undefined;
+    this.inputText = undefined;
   }
   get items() {
     return Array.from(this.hostElement.querySelectorAll('ix-select-item'));

package/dist/components/ix-split-button-item.js

@@ -9,6 +9,8 @@ const SplitButtonItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.itemClick = createEvent(this, "itemClick", 7);
+    this.icon = undefined;
+    this.label = undefined;
   }
   render() {
     return (h("ix-dropdown-item", { icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));

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

@@ -11,39 +11,14 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.buttonClick = createEvent(this, "buttonClick", 7);
-    /**
-     * Color variant of button
-     */
     this.variant = 'Primary';
-    /**
-     * Button outline variant
-     */
     this.outline = false;
-    /**
-     * Button invisible
-     *
-     * @deprecated use ghost property
-     */
     this.invisible = false;
-    /**
-     * Button invisible
-     */
     this.ghost = false;
-    /**
-     * Button icon
-     */
+    this.label = undefined;
     this.icon = '';
-    /**
-     * Splitbutton icon
-     */
     this.splitIcon = 'context-menu';
-    /**
-     * Disabled
-     */
     this.disabled = false;
-    /**
-     * Placement of the dropdown
-     */
     this.placement = 'bottom-start';
     this.toggle = false;
   }

package/dist/components/ix-tile.js

@@ -6,9 +6,6 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Size of the tile - one of 'small', 'medium' or 'large'
-     */
     this.size = 'medium';
   }
   render() {

package/dist/components/ix-toast-container.js

@@ -8,14 +8,8 @@ const ToastContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   constructor() {
     super();
     this.__registerHost();
-    /**
-     */
     this.containerId = 'toast-container';
-    /**
-     */
     this.containerClass = 'toast-container';
-    /**
-     */
     this.position = 'bottom-right';
   }
   get hostContainer() {

package/dist/components/ix-toggle.js

@@ -7,38 +7,13 @@ const CuiToggle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.checkedChange = createEvent(this, "checkedChange", 7);
-    /**
-     * Whether the slide-toggle element is checked or not.
-     */
     this.checked = false;
-    /**
-     * Whether the slide-toggle element is disabled or not.
-     */
     this.disabled = false;
-    /**
-     * If true the control is in indeterminate state
-     */
     this.indeterminate = false;
-    /**
-     * Basic and status colors from color palette
-     * @deprecated - Has no effect on the rendered control
-     */
     this.color = 'accent';
-    /**
-     * Text for on state
-     */
     this.textOn = 'On';
-    /**
-     * Text for off state
-     */
     this.textOff = 'Off';
-    /**
-     * Text for indeterminate state
-     */
     this.textIndeterminate = 'Mixed';
-    /**
-     * Hide `on` and `off` text
-     */
     this.hideText = false;
   }
   async onKeyDown(event) {