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

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

@@ -1,88 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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 };