@siemens/ix 1.0.0-beta.2

package/dist/components/dropdown.js

@@ -0,0 +1,181 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createPopper } from './popper.js';
+
+const dropdownCss = ".dropup,.dropend,.dropdown,.dropstart,.dropup-center,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid;border-right:0.3em solid transparent;border-bottom:0;border-left:0.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:#212529;--bs-dropdown-bg:#fff;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:0.375rem;--bs-dropdown-border-width:1px;--bs-dropdown-inner-border-radius:calc(0.375rem - 1px);--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-dropdown-link-color:#212529;--bs-dropdown-link-hover-color:#1e2125;--bs-dropdown-link-hover-bg:#e9ecef;--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width: 576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0;border-right:0.3em solid transparent;border-bottom:0.3em solid;border-left:0.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid transparent;border-right:0;border-bottom:0.3em solid transparent;border-left:0.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\"}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid transparent;border-right:0.3em solid;border-bottom:0.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:hover,.dropdown-item:focus{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:0.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.dropup .btn,.dropright .btn,.dropdown .btn,.dropleft .btn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;text-align:left;width:100%}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{background-color:var(--theme-menu--background);-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);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color 150ms;box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color)}.dropdown-item:focus{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}:host{min-width:0px}";
+
+const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.showChanged = createEvent(this, "showChanged", 7);
+    /**
+     * Show dropdown
+     */
+    this.show = false;
+    /**
+     * Close behavior
+     */
+    this.closeBehavior = 'both';
+    /**
+     * Placement of the dropdown
+     */
+    this.placement = 'bottom-end';
+    /**
+     * Position strategy
+     */
+    this.positioningStrategy = 'fixed';
+    /**
+     * Adjust dropdown width to the parent width
+     * @deprecated - property has a typo and will get removed in the next major version. Use `adjustDropdownWidthToReferenceWidth` instead.
+     */
+    this.adjustDropdownWidthToReferenceWith = false;
+    /**
+     * Adjust dropdown width to the parent width
+     */
+    this.adjustDropdownWidthToReferenceWidth = false;
+    this.openBind = this.open.bind(this);
+  }
+  get dropdownItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
+  }
+  resolveElement(prop) {
+    if (typeof prop === 'string') {
+      return document.querySelector('#' + prop);
+    }
+    return prop;
+  }
+  async componentDidLoad() {
+    if (this.trigger) {
+      this.registerListener(this.trigger);
+    }
+  }
+  registerListener(element) {
+    this.triggerElement = this.resolveElement(element);
+    this.triggerElement.addEventListener('click', this.openBind);
+  }
+  unregisterListener(element) {
+    const trigger = this.resolveElement(element);
+    trigger.removeEventListener('click', this.openBind);
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+  }
+  async changedShow(newShow) {
+    var _a;
+    if (newShow) {
+      this.anchorElement = this.anchor
+        ? this.resolveElement(this.anchor)
+        : this.resolveElement(this.trigger);
+      if (this.anchorElement) {
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popperInstance = createPopper(this.anchorElement, this.dropdownRef, {
+          placement: this.placement,
+          strategy: this.positioningStrategy,
+          onFirstUpdate: ({ elements }) => {
+            if (this.adjustDropdownWidthToReferenceWith ||
+              this.adjustDropdownWidthToReferenceWidth) {
+              const { popper, reference } = elements;
+              const width = reference.getBoundingClientRect().width;
+              popper.style.width = `${width}px`;
+            }
+          },
+        });
+      }
+    }
+  }
+  changedTrigger(newTriggerValue, oldTriggerValue) {
+    if (newTriggerValue) {
+      this.registerListener(newTriggerValue);
+    }
+    if (oldTriggerValue) {
+      this.unregisterListener(oldTriggerValue);
+    }
+  }
+  clickOutside(event) {
+    const target = event.target;
+    if (this.show === false ||
+      this.closeBehavior === false ||
+      this.anchorElement === target ||
+      this.triggerElement === target) {
+      return;
+    }
+    switch (this.closeBehavior) {
+      case 'outside':
+        if (!this.dropdownRef.contains(target)) {
+          this.close();
+        }
+        break;
+      case 'inside':
+        if (this.dropdownRef.contains(target)) {
+          this.close();
+        }
+        break;
+      default:
+        this.close();
+    }
+  }
+  open(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    this.show = !this.show;
+    this.showChanged.emit(this.show);
+  }
+  close() {
+    this.show = false;
+    this.showChanged.emit(this.show);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  /**
+   * Update position of dropdown
+   */
+  async updatePosition() {
+    var _a;
+    await ((_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update());
+  }
+  render() {
+    return (h(Host, { ref: (ref) => (this.dropdownRef = ref), class: {
+        'dropdown-menu': true,
+        show: this.show,
+      }, style: {
+        margin: '0',
+        minWidth: '0px',
+      } }, h("div", { style: { display: 'contents' } }, this.header ? h("div", { class: "dropdown-header" }, this.header) : '', h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "show": ["changedShow"],
+    "trigger": ["changedTrigger"]
+  }; }
+  static get style() { return dropdownCss; }
+}, [1, "ix-dropdown", {
+    "show": [1540],
+    "trigger": [1],
+    "anchor": [1],
+    "closeBehavior": [8, "close-behavior"],
+    "placement": [1],
+    "positioningStrategy": [1, "positioning-strategy"],
+    "adjustDropdownWidthToReferenceWith": [4, "adjust-dropdown-width-to-reference-with"],
+    "adjustDropdownWidthToReferenceWidth": [4, "adjust-dropdown-width-to-reference-width"],
+    "header": [1],
+    "updatePosition": [64]
+  }, [[8, "click", "clickOutside"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Dropdown);
+      }
+      break;
+  } });
+}
+
+export { Dropdown as D, defineCustomElement as d };

package/dist/components/filter-chip.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.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,.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,.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip:not(.disabled):not(:disabled):focus-visible{outline:none;border-color:#199fff}";
+
+const FilterChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return filterChipCss; }
+}, [6, "ix-filter-chip", {
+    "disabled": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-filter-chip", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-filter-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FilterChip);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { FilterChip as F, defineCustomElement as d };

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

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var FlipTileState;
+(function (FlipTileState) {
+  FlipTileState["None"] = "None";
+  FlipTileState["Info"] = "Info";
+  FlipTileState["Warning"] = "Warning";
+  FlipTileState["Alarm"] = "Alarm";
+  FlipTileState["Primary"] = "Primary";
+})(FlipTileState || (FlipTileState = {}));
+
+export { FlipTileState as F };

package/dist/components/group-item.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return groupItemCss; }
+}, [6, "ix-group-item", {
+    "icon": [1],
+    "text": [1],
+    "secondaryText": [1, "secondary-text"],
+    "suppressSelection": [4, "suppress-selection"],
+    "selected": [4],
+    "focusable": [4],
+    "index": [2]
+  }, [[1, "click", "clickListen"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-group-item", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-group-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GroupItem);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GroupItem as G, defineCustomElement as d };

package/dist/components/icon-button.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { g as getButtonClasses } from './base-button.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * 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))));
+  }
+}, [6, "ix-icon-button", {
+    "variant": [1],
+    "outline": [4],
+    "invisible": [4],
+    "ghost": [4],
+    "oval": [4],
+    "icon": [1],
+    "size": [1],
+    "color": [1],
+    "selected": [4],
+    "disabled": [4],
+    "type": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-icon-button", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IconButton);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { IconButton as I, defineCustomElement as d };

package/dist/components/icon.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  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))));
+  }
+  static get style() { return iconCss; }
+}, [6, "ix-icon", {
+    "size": [1],
+    "color": [1],
+    "name": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Icon);
+      }
+      break;
+  } });
+}
+
+export { Icon as I, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* SiemensIx custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,62 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { I as InputState, L as LogicalFilterOperator } from './logical-filter-operator.js';
+export { F as FlipTileState } from './flip-tile-state.js';
+export { M as ModalContainer } from './modal-container.js';
+export { M as Modal } from './modal.js';
+export { c as convertToAbbreviationString, a as convertToRemString } from './rwd.util.js';
+export { c as closeModal, d as dismissModal, m as modal } from './modal-utils.js';
+export { r as renderDefaultItem } from './default-tree-item.js';
+export { U as UploadFileState } from './upload-file-state.js';
+
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class FilterState {
+}
+
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function getToastContainer() {
+  const containerList = Array.from(document.querySelectorAll('ix-toast-container'));
+  const [container] = containerList;
+  if (containerList.length > 1) {
+    console.warn('Multiple toast container are found. Only there first is used.');
+    return container;
+  }
+  if (!container) {
+    const toastContainer = document.createElement('ix-toast-container');
+    document.body.appendChild(toastContainer);
+    return toastContainer;
+  }
+  return container;
+}
+async function toast(config) {
+  const context = getToastContainer();
+  const toast = await context.showToast(config);
+  return toast;
+}
+toast.info = (config) => {
+  return toast(Object.assign(Object.assign({}, config), { type: 'info' }));
+};
+toast.error = (config) => {
+  return toast(Object.assign(Object.assign({}, config), { type: 'error' }));
+};
+toast.success = (config) => {
+  return toast(Object.assign(Object.assign({}, config), { type: 'success' }));
+};
+toast.warning = (config) => {
+  return toast(Object.assign(Object.assign({}, config), { type: 'warning' }));
+};
+
+export { FilterState, toast };

package/dist/components/ix-animated-tab.d.ts

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

package/dist/components/ix-animated-tab.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const animatedTabCss = ".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";
+
+const AnimatedTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return animatedTabCss; }
+}, [6, "ix-animated-tab", {
+    "icon": [1],
+    "count": [514]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-animated-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-animated-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AnimatedTab);
+      }
+      break;
+  } });
+}
+
+const IxAnimatedTab = AnimatedTab;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxAnimatedTab, defineCustomElement };

package/dist/components/ix-animated-tabs.d.ts

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