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

package/dist/esm/ix-expanding-search.entry.js

@@ -0,0 +1,88 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-55cfd20d.js';
+
+const expandingSearchCss = ".sc-ix-expanding-search-h{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between}.right-position.sc-ix-expanding-search-h{width:11.5625rem !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{transition:all 0.3s ease-in-out}.sc-ix-expanding-search-h .disable-pointer.sc-ix-expanding-search{pointer-events:none}.sc-ix-expanding-search-h input.sc-ix-expanding-search{box-shadow:var(--theme-input--box-shadow)}.sc-ix-expanding-search-h .expanded.sc-ix-expanding-search{width:11.5625rem}.sc-ix-expanding-search-h .collapsed.sc-ix-expanding-search{width:1.5rem;border:none}.sc-ix-expanding-search-h .btn-search-icon.sc-ix-expanding-search{align-self:center;margin:auto;position:relative}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all 0.15s ease-in-out;z-index:1;align-items:center;position:relative;border:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):hover{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):active{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}.sc-ix-expanding-search-h .btn-clear.sc-ix-expanding-search{position:absolute;border-radius:var(--theme-input--border-radius);right:0px}.sc-ix-expanding-search-h .input.sc-ix-expanding-search{padding-left:2rem !important;padding-right:2.5rem !important}.sc-ix-expanding-search-h .opacity-before.sc-ix-expanding-search{opacity:0}.sc-ix-expanding-search-h .opacity-after.sc-ix-expanding-search{opacity:1}";
+
+const ExpandingSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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;
+    this.hasFocus = false;
+    this.focusTextInput = this.focusTextInput.bind(this);
+  }
+  expandInput() {
+    setTimeout(this.focusTextInput, 300);
+    this.expanded = true;
+  }
+  collapseInput() {
+    if (!this.isFieldChanged && this.expanded) {
+      this.expanded = false;
+    }
+  }
+  clearInput() {
+    this.value = '';
+    this.isFieldChanged = false;
+  }
+  onChange(e) {
+    this.value = e.target.value;
+    if (this.isFieldChanged && this.value === '') {
+      this.isFieldChanged = false;
+    }
+    else {
+      this.isFieldChanged = true;
+    }
+    this.valueChange.emit(this.value);
+  }
+  focusTextInput() {
+    var _a;
+    (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  clearClicked() {
+    var _a;
+    this.clearInput();
+    (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+    this.valueChange.emit(this.value);
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.expanded,
+        'right-position': this.expanded,
+      } }, h("button", { class: {
+        btn: true,
+        'btn-invisible-primary': true,
+        'btn-icon': true,
+        'btn-search': true,
+        'disable-pointer': this.expanded,
+      }, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0 }, h("ix-icon", { class: "btn-search-icon", name: this.icon, size: this.expanded ? '16' : '24', color: this.hasFocus ? 'input-search-icon--color--focus' : undefined })), h("div", { class: {
+        expanded: this.expanded,
+        collapsed: !this.expanded,
+        'disable-pointer': !this.expanded,
+        'input-container': true,
+      }, "data-testid": "input-wrapper" }, h("input", { class: {
+        'form-control': true,
+        input: this.expanded,
+        'disable-pointer': !this.expanded,
+        'opacity-before': !this.expanded,
+        'opacity-after': this.expanded,
+      }, ref: (el) => (this.textInput = el), "data-testid": "input", placeholder: this.placeholder, type: "text", value: this.value, onBlur: () => {
+        this.collapseInput();
+        this.hasFocus = false;
+      }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "24", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
+  }
+};
+ExpandingSearch.style = expandingSearchCss;
+
+export { ExpandingSearch as ix_expanding_search };

package/dist/esm/ix-filter-chip.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+
+const filterChipCss = ".sc-ix-filter-chip-h{display:flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid transparent;border-radius:2rem;background-color:var(--theme-chip--background);color:var(--theme-chip--color)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-chip--background--hover)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):active{background-color:var(--theme-chip--background--active)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):focus-visible{border-color:#199fff}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip .disabled.sc-ix-filter-chip-h,.disabled .sc-ix-filter-chip-h{color:var(--theme-chip--color-diabled)}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip{height:1.5rem;width:1.5rem;min-width:1.5rem;margin-left:0.25rem;padding:0;vertical-align:top}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip:not(.disabled):not(:disabled):focus-visible{outline:none;border-color:#199fff}";
+
+const FilterChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeClick = createEvent(this, "closeClick", 7);
+    /**
+     * If true the filter chip will be in disabled state
+     */
+    this.disabled = false;
+  }
+  onCloseClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeClick.emit();
+  }
+  render() {
+    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), h("button", { disabled: this.disabled, class: "btn btn-invisible-secondary btn-oval", onClick: (e) => this.onCloseClick(e) }, h("ix-icon", { name: "close-small", size: "16" }))));
+  }
+  get el() { return getElement(this); }
+};
+FilterChip.style = filterChipCss;
+
+export { FilterChip as ix_filter_chip };

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 };