@siemens/ix 1.0.0-beta.2

package/dist/esm/ix-flip-tile_2.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
+import { F as FlipTileState } from './flip-tile-state-28a1f8ce.js';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ANIMATION_DURATION = 150;
+    this.index = 0;
+  }
+  componentDidLoad() {
+    this.contentItems = this.contentContainerElement.querySelectorAll('ix-flip-tile-content');
+    this.contentItems.forEach((_, index) => {
+      if (index !== this.index) {
+        this.toggleContentItem(index);
+      }
+    });
+  }
+  toggleIndex() {
+    this.doFlipAnimation();
+  }
+  toggleContentItem(index) {
+    const item = this.contentItems[index];
+    item.classList.toggle('d-none');
+  }
+  doFlipAnimation() {
+    this.isFlipAnimationActive = true;
+    setTimeout(() => {
+      this.toggleContentItem(this.index);
+      if (this.index >= this.contentItems.length - 1) {
+        this.index = 0;
+      }
+      else {
+        this.index++;
+      }
+      this.toggleContentItem(this.index);
+    }, this.ANIMATION_DURATION);
+    setTimeout(() => {
+      this.isFlipAnimationActive = false;
+    }, 2 * this.ANIMATION_DURATION);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'flip-tile-container': true,
+        info: this.state === FlipTileState.Info,
+        warning: this.state === FlipTileState.Warning,
+        alarm: this.state === FlipTileState.Alarm,
+        primary: this.state === FlipTileState.Primary,
+        'flip-animation-active': this.isFlipAnimationActive,
+      } }, h("div", { class: "flip-tile-header" }, h("div", { class: "header-slot-container text-l-title" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "eye", variant: "Primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) }, h("slot", null)), h("div", { class: {
+        footer: true,
+        'contrast-light': this.state === FlipTileState.Warning,
+        'contrast-dark': this.state === FlipTileState.Info ||
+          this.state === FlipTileState.Alarm,
+      } }, h("slot", { name: "footer" })))));
+  }
+  get hostElement() { return getElement(this); }
+};
+FlipTile.style = flipTileCss;
+
+const flipTileContentCss = ":host{display:block}";
+
+const FlipTileContent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+FlipTileContent.style = flipTileContentCss;
+
+export { FlipTile as ix_flip_tile, FlipTileContent as ix_flip_tile_content };

package/dist/esm/ix-group_3.entry.js

@@ -0,0 +1,168 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+Group.style = groupCss;
+
+const groupDropdownItemCss = ".sc-ix-group-dropdown-item-h{display:contents}";
+
+const GroupDropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("ix-dropdown-item", { label: this.label, icon: this.icon }, h("slot", null))));
+  }
+};
+GroupDropdownItem.style = groupDropdownItemCss;
+
+const groupItemCss = ".sc-ix-group-item-h{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;justify-content:space-between;padding:0.5rem 1.5rem 0.5rem 2.5rem;position:relative;margin-top:0.0625rem;border:1px solid var(--theme-group-item--border-color);outline:none;background-color:var(--theme-group-item--background)}.last.sc-ix-group-item-h{border-bottom-left-radius:0.25rem;border-bottom-right-radius:0.25rem}.sc-ix-group-item-h ix-icon.sc-ix-group-item{margin-right:0.25rem;margin-top:-0.125rem}.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{position:absolute;left:0;height:100%;width:0.25rem}.sc-ix-group-item-h .group-entry-text.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text);font-size:0.875rem}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item,.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item span.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):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-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.selected.sc-ix-group-item-h{border-top-width:0.062rem !important;border-color:var(--theme-group-item--border-color--selected);background-color:var(--theme-group-item--background--selected)}.selected.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{background-color:var(--theme-color-input-focus)}.sc-ix-group-item-h:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color) !important}";
+
+const GroupItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedChanged = createEvent(this, "selectedChanged", 7);
+    /**
+     * Supress the selection of the group
+     */
+    this.suppressSelection = false;
+    /**
+     * The elements tabindex attribute will get set accordingly.
+     * If true tabindex will be 0, -1 otherwise.
+     */
+    this.focusable = true;
+  }
+  clickListen() {
+    if (this.suppressSelection) {
+      return;
+    }
+    this.selectedChanged.emit(this.hostElement);
+  }
+  render() {
+    return (h(Host, { class: {
+        selected: this.selected && !this.suppressSelection,
+        'suppress-selection': this.suppressSelection,
+      }, tabindex: this.focusable ? 0 : -1 }, h("div", { class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", null)));
+  }
+  get hostElement() { return getElement(this); }
+};
+GroupItem.style = groupItemCss;
+
+export { Group as ix_group, GroupDropdownItem as ix_group_dropdown_item, GroupItem as ix_group_item };

package/dist/esm/ix-icon-button.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, h } from './index-55cfd20d.js';
+import { g as getButtonClasses } from './base-button-7bfb747f.js';
+
+const IconButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Variant of button
+     */
+    this.variant = 'Secondary';
+    /**
+     * Size of icon in button
+     */
+    this.size = '24';
+    /**
+     * Selected state only working with outline or invisible
+     */
+    this.selected = false;
+    /**
+     * Disabled
+     */
+    this.disabled = false;
+    /**
+     * Type of the button
+     */
+    this.type = 'button';
+  }
+  getIconButtonClasses() {
+    return Object.assign({ 'btn-icon-xs': this.size === '12', 'btn-icon-s': this.size === '16' }, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled));
+  }
+  render() {
+    return (h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null))));
+  }
+};
+
+export { IconButton as ix_icon_button };

package/dist/esm/ix-icon.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host } from './index-55cfd20d.js';
+
+const iconCss = ".sc-ix-icon-h{display:inline-flex;height:1.5rem;width:1.5rem;color:var(--theme-color-std-text)}.sc-ix-icon-h i.sc-ix-icon{color:inherit;transition:color 150ms}.size-12.sc-ix-icon-h{height:0.75rem;width:0.75rem}.size-16.sc-ix-icon-h{height:1rem;width:1rem}.size-32.sc-ix-icon-h{height:2rem;width:2rem}";
+
+const Icon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { style: {
+        color: this.color ? `var(--theme-${this.color})` : 'inherit',
+      }, class: {
+        [`size-12`]: this.size === '12',
+        [`size-16`]: this.size === '16',
+        [`size-24`]: this.size === '24',
+        [`size-32`]: this.size === '32',
+      } }, h("i", { class: {
+        glyph: true,
+        [`glyph-${this.name}`]: true,
+        'glyph-12': this.size === '12',
+        'glyph-16': this.size === '16',
+        'glyph-24': this.size === '24',
+        'glyph-32': this.size === '32',
+      } }, h("slot", null))));
+  }
+};
+Icon.style = iconCss;
+
+export { Icon as ix_icon };

package/dist/esm/ix-input-group.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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 getElement(this); }
+};
+InputGroup.style = inputGroupCss;
+
+export { InputGroup as ix_input_group };

package/dist/esm/ix-kpi.entry.js

@@ -0,0 +1,46 @@
+import { r as registerInstance, h, H as Host } from './index-55cfd20d.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     *
+     */
+    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) : ''))));
+  }
+};
+Kpi.style = kpiCss;
+
+export { Kpi as ix_kpi };

package/dist/esm/ix-map-navigation_2.entry.js

@@ -0,0 +1,185 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+import { a as anime } from './anime.es-185e9087.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+MapNavigation.defaultTime = 150;
+MapNavigation.slowTime = 500;
+MapNavigation.style = mapNavigationCss;
+
+const mapNavigationOverlayCss = ".text-xs.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-map-navigation-overlay{-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)}.text-l-title-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-map-navigation-overlay{-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)}.text-xl.sc-ix-map-navigation-overlay{-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)}a.sc-ix-map-navigation-overlay{color:var(--theme-color-primary)}.sc-ix-map-navigation-overlay-h{position:absolute;width:100%;height:100%;z-index:2;background-color:var(--theme-overlay--background)}.sc-ix-map-navigation-overlay-h .overlay-header.sc-ix-map-navigation-overlay{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay{display:flex;align-items:center;min-width:0}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay ix-icon.sc-ix-map-navigation-overlay{margin-left:1rem;color:var(--theme-overlay-header--color)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay .overlay-header-title.sc-ix-map-navigation-overlay{-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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);margin-left:1rem}.sc-ix-map-navigation-overlay-h .color-indicator.sc-ix-map-navigation-overlay{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}.sc-ix-map-navigation-overlay-h .overlay-close.sc-ix-map-navigation-overlay{margin-left:auto;margin-right:1rem}";
+
+const MapNavigationOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeClick = createEvent(this, "closeClick", 7);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "overlay-header" }, h("div", { class: {
+        'color-indicator': true,
+        'd-none': this.color === 'undefined' || this.color === undefined,
+      }, style: {
+        'background-color': this.color
+          ? `var(--theme-${this.color})`
+          : '',
+      } }), h("div", { class: "overlay-header-content" }, h("ix-icon", { size: "32", name: this.icon }), h("span", { class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { class: "overlay-close", invisible: true, icon: "close", size: "24", onClick: () => this.closeClick.emit() })), h("slot", null)));
+  }
+};
+MapNavigationOverlay.style = mapNavigationOverlayCss;
+
+export { MapNavigation as ix_map_navigation, MapNavigationOverlay as ix_map_navigation_overlay };