@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-expanding-search.entry-Bra1tzX9.js

@@ -0,0 +1,81 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.js";
+import { l as iconClear, k as iconSearch } from "./index-BBzEV-f4-ChQfUIyc.js";
+const expandingSearchCss = () => `.ix-form-control,.ix-form-control-plaintext{color:var(--theme-input--color);border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control[type=number]{text-align:right}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-container{transition:all var(--theme-medium-time) ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host{}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all var(--theme-default-time) ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover,:host .btn-search:not(.disabled):not(:disabled).hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host{}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}`;
+const ExpandingSearch = class {
+  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);
+  }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.placeholder = "Enter text here";
+    this.value = "";
+    this.fullWidth = false;
+    this.variant = "tertiary";
+    this.ariaLabelClearIconButton = "Clear search";
+    this.ariaLabelSearchInput = "Search input";
+    this.isFieldChanged = false;
+    this.expanded = false;
+    this.hasFocus = false;
+    this.focusTextInput = this.focusTextInput.bind(this);
+  }
+  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() {
+    var _a, _b;
+    return h(Host, { key: "89dd7b99531c8ccd578ff26517ae2959c3e73c66", class: {
+      expanded: this.expanded,
+      "right-position": this.expanded,
+      fullWidth: this.fullWidth
+    } }, h("ix-icon-button", { key: "bf53f12935f7026517f1466383ddd38c4fdb5165", size: this.expanded ? "16" : "24", icon: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, variant: this.expanded ? "tertiary" : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? "input-search-icon--color--focus" : void 0, class: {
+      "btn-search": true,
+      "btn-search--expanded": this.expanded
+    }, "aria-label": (_b = this.ariaLabelSearchIconButton) !== null && _b !== void 0 ? _b : this.expanded ? "Close search" : "Open search" }), h("div", { key: "84a10a9fa5599e4c15aeed3e10b4523d7d99d373", class: {
+      expanded: this.expanded,
+      fullWidth: this.fullWidth,
+      collapsed: !this.expanded,
+      "disable-pointer": !this.expanded,
+      "input-container": true
+    }, "data-testid": "input-wrapper" }, h("input", { key: "f4e4779e2db00e5c1b2478853e29748cae03452a", class: {
+      "ix-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, "aria-label": this.ariaLabelSearchInput }), this.isFieldChanged ? h("ix-icon-button", { class: "btn-clear", icon: iconClear, variant: "subtle-tertiary", size: "16", "data-testid": "clear-button", onClick: () => this.clearClicked(), "aria-label": this.ariaLabelClearIconButton }) : null));
+  }
+};
+ExpandingSearch.style = expandingSearchCss();
+export {
+  ExpandingSearch as ix_expanding_search
+};

package/build/static/demo/v2/preview/html/assets/ix-field-label_2.entry-CpajN8qr.js

@@ -0,0 +1,174 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { b as a11yHostAttributes } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { c as createClassMutationObserver } from "./validation-CTBekLDe-sG9H3Ujv.js";
+import { h as hasAnyText, H as HelperText$1 } from "./helper-text-util-C9sLzo0k-ByYMuUsm.js";
+import "./index-BBzEV-f4-ChQfUIyc.js";
+function isIxInputFieldComponent(obj) {
+  return obj && "getAssociatedFormElement" in obj && typeof obj.getAssociatedFormElement === "function" && "getNativeInputElement" in obj && typeof obj.getNativeInputElement === "function";
+}
+const fieldLabelCss = () => `:host{display:inline-block;position:relative;margin-top:0.5rem;margin-bottom:0.25rem}`;
+const FormFieldLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isInvalid = false;
+    this.explicitIsInvalid = void 0;
+    this.htmlForObserver = new MutationObserver(() => this.checkForInternalState());
+    this.a11yAttributes = {};
+    this.labelRef = makeRef();
+  }
+  isInvalidChanged(newValue) {
+    this.explicitIsInvalid = newValue;
+  }
+  connectedCallback() {
+    this.registerHtmlForObserver();
+    this.registerControlRefObserver();
+  }
+  disconnectedCallback() {
+    if (this.htmlForObserver) {
+      this.htmlForObserver.disconnect();
+    }
+    if (this.htmlForClassObserver) {
+      this.htmlForClassObserver.destroy();
+    }
+    if (this.controlRefClassObserver) {
+      this.controlRefClassObserver.destroy();
+    }
+  }
+  componentWillRender() {
+    this.checkForInternalState();
+  }
+  componentWillLoad() {
+    this.a11yAttributes = a11yHostAttributes(this.hostElement);
+  }
+  registerHtmlForObserver() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (this.htmlForObserver) {
+      this.htmlForObserver.disconnect();
+    }
+    if (this.htmlFor) {
+      this.htmlForObserver.observe(window.document, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+  async registerControlRefObserver() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (this.controlRefClassObserver) {
+      this.controlRefClassObserver.destroy();
+    }
+    if (this.controlRef && !this.htmlFor) {
+      const input = await this.controlRef.waitForCurrent();
+      this.controlRefClassObserver = createClassMutationObserver(input, () => this.checkForInvalidState(input));
+    }
+  }
+  registerHtmlForClassObserver(forElement) {
+    if (this.htmlForClassObserver) {
+      this.htmlForClassObserver.destroy();
+    }
+    this.htmlForClassObserver = createClassMutationObserver(forElement, () => this.checkForInvalidState(forElement));
+  }
+  checkForInvalidState(elementToCheck) {
+    var _a;
+    const hasInvalidClass = elementToCheck.classList.contains("is-invalid") || elementToCheck.classList.contains("ix-invalid");
+    this.isInvalid = (_a = this.explicitIsInvalid) !== null && _a !== void 0 ? _a : hasInvalidClass;
+  }
+  async checkForInternalState() {
+    if (this.htmlFor) {
+      const forElement = document.getElementById(this.htmlFor);
+      if (forElement) {
+        if (typeof forElement.required === "boolean") {
+          this.required = forElement.required;
+        }
+        this.registerHtmlForClassObserver(forElement);
+        this.checkForInvalidState(forElement);
+        return;
+      }
+    }
+    if (this.controlRef) {
+      const input = await this.controlRef.waitForCurrent();
+      this.required = input.required;
+    }
+  }
+  async focusOnClick() {
+    if (this.htmlFor) {
+      const target = document.getElementById(this.htmlFor);
+      if (target) {
+        let input = null;
+        if (isIxInputFieldComponent(target)) {
+          input = await target.getNativeInputElement();
+        } else {
+          input = target;
+        }
+        if (typeof input.focus === "function") {
+          input.focus();
+        }
+      }
+    }
+    if (this.controlRef) {
+      (await this.controlRef.waitForCurrent()).focus();
+    }
+  }
+  render() {
+    return h(Host, { key: "1a8134a30a1b101f6bfd678f905eb88e927e47d6", onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: "ef6df6072485fb72ea02a0a9800be3be15e84314", htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: "572975edeae54d15932c3b6091ed63dfff8bb231", textColor: this.isInvalid ? "alarm" : "soft", format: "label" }, h("slot", { key: "452847ea7365cefc945bc6166bf2e8fd44d3f530" }), this.required && h("span", { key: "5e85f801d6fe8a01d6595a55bb263d0bcf91a888" }, "*"))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "isInvalid": [{
+        "isInvalidChanged": 0
+      }],
+      "htmlFor": [{
+        "registerHtmlForObserver": 0
+      }],
+      "controlRef": [{
+        "registerControlRefObserver": 0
+      }]
+    };
+  }
+};
+FormFieldLabel.style = fieldLabelCss();
+const fieldWrapperCss = () => `:host{display:flex;position:relative;flex-direction:column}:host .slot-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;gap:0.25rem}:host .field-bottom,:host .field-top{display:flex;flex-direction:row;position:relative;justify-content:space-between;gap:1rem;width:-moz-min-content;width:min-content;min-width:100%}:host .field-bottom .bottom-right{margin-left:auto;margin-right:0px}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}`;
+const FieldWrapper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isInvalid = false;
+    this.isValid = false;
+    this.isInfo = false;
+    this.isWarning = false;
+    this.showTextAsTooltip = false;
+    this.required = false;
+    this.slotRef = makeRef();
+  }
+  render() {
+    const textOptions = {
+      invalidText: this.invalidText,
+      isInvalid: this.isInvalid,
+      isValid: this.isValid,
+      validText: this.validText,
+      isWarning: this.isWarning,
+      warningText: this.warningText,
+      isInfo: this.isInfo,
+      infoText: this.infoText,
+      helperText: this.helperText
+    };
+    return h(Host, { key: "531b08942bf31c36043fb3d7cd3af489f2fe83b0" }, this.label && h("div", { key: "49b9ef124fc2d69fb2528585d7b232b2e3d6d4b6", class: "field-top" }, h("ix-field-label", { key: "20a089a72de7ee3045c048c19d868ff3b4be2706", required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label)), h("div", { key: "80c8ce58eb73379755757b2cef6b318cdc279b6b", class: {
+      "slot-wrapper": true
+    }, ref: this.slotRef }, h("slot", { key: "f41f0681742e9f783092bad7484c851e2b987c99" })), h("div", { key: "9db46e23621d508e08fe87cae69a3698491347dc", class: "field-bottom" }, !this.showTextAsTooltip && h(HelperText$1, Object.assign({ key: "29802c92675a34cd215740a5df6fae77ed36368f" }, textOptions)), h("div", { key: "b94a1cc2acd5f8379e768fda9f222af6cb85f2b7", class: "bottom-right" }, h("slot", { key: "3c5ba2d9a6d4671b6fadba6e06455ae229894f94", name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && h("ix-tooltip", { key: "890c4a39781fbb14b96660691fd6f6fe96a30e0b", for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText$1, Object.assign({ key: "638410fd78282cf38065635a79cceeb064a2a10e" }, textOptions))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+FieldWrapper.style = fieldWrapperCss();
+export {
+  FormFieldLabel as ix_field_label,
+  FieldWrapper as ix_field_wrapper
+};

package/build/static/demo/v2/preview/html/assets/ix-filter-chip_2.entry-CeNTgWyQ.js

@@ -0,0 +1,110 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { m as iconCloseSmall } from "./index-BBzEV-f4-ChQfUIyc.js";
+const filterChipCss = () => `:host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}`;
+const FilterChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeClick = createEvent(this, "closeClick", 7);
+    this.disabled = false;
+    this.readonly = false;
+  }
+  onCloseClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeClick.emit();
+  }
+  render() {
+    return h(Host, { key: "e583d14307f98b55f1ff4be4b9c3897776eaae75", class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, h("div", { key: "998751b62b8266368176fe1186a6dd2f311199be", class: "slot-container" }, h("slot", { key: "2861044a08d5b237444cda5bb5fafe0bc0c97790" })), !this.disabled && !this.readonly ? h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton }) : null);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+FilterChip.style = filterChipCss();
+class IxSelectItemLabelChangeEvent extends CustomEvent {
+  constructor(detail) {
+    super("ix-select-item:labelChange", {
+      bubbles: true,
+      detail
+    });
+  }
+}
+class IxSelectItemValueChangeEvent extends CustomEvent {
+  constructor(detail) {
+    super("ix-select-item:valueChange", {
+      bubbles: true,
+      detail
+    });
+  }
+}
+const selectItemCss = () => `:host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host ix-dropdown-item{color:var(--theme-color-std-text)}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.display-none){display:none}`;
+const SelectItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.selected = false;
+    this.hover = false;
+    this.componentLoaded = false;
+  }
+  /** @internal */
+  async getDropdownItemElement() {
+    return this.dropdownItem;
+  }
+  /**
+   * @internal
+   * @param event
+   */
+  async onItemClick(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    this.itemClick.emit(this.value);
+  }
+  get dropdownItem() {
+    return this.hostElement.querySelector("ix-dropdown-item");
+  }
+  componentDidRender() {
+    if (this.value === void 0 || this.value === null) {
+      console.warn("ix-select-item must have a `value` property");
+    }
+    this.componentLoaded = true;
+  }
+  onValueChange(newValue, oldValue) {
+    if (this.componentLoaded) {
+      this.hostElement.dispatchEvent(new IxSelectItemValueChangeEvent({
+        newValue,
+        oldValue
+      }));
+    }
+  }
+  labelChange(newValue, oldValue) {
+    if (this.componentLoaded) {
+      this.hostElement.dispatchEvent(new IxSelectItemLabelChangeEvent({
+        newValue,
+        oldValue
+      }));
+    }
+  }
+  render() {
+    return h(Host, { key: "619f989267f4add7b0975752c1df3194c1bc9810" }, h("ix-dropdown-item", { key: "6a54101b711fb3fef7fe39bcc260b50e6f8ba1f9", class: {
+      "select-item-checked": this.selected
+    }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) }));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "value": [{
+        "onValueChange": 0
+      }],
+      "label": [{
+        "labelChange": 0
+      }]
+    };
+  }
+};
+SelectItem.style = selectItemCss();
+export {
+  FilterChip as ix_filter_chip,
+  SelectItem as ix_select_item
+};

package/build/static/demo/v2/preview/html/assets/ix-flip-tile-content.entry-BwxrRn4y.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+const flipTileContentCss = () => `:host{display:block}`;
+const FlipTileContent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.contentVisible = false;
+  }
+  render() {
+    return h(Host, { key: "002fbfde1a46839d622af7fb2be6dff5ca99aa87" }, this.contentVisible ? h("slot", null) : null);
+  }
+};
+FlipTileContent.style = flipTileContentCss();
+export {
+  FlipTileContent as ix_flip_tile_content
+};

package/build/static/demo/v2/preview/html/assets/ix-flip-tile.entry-h2PC8IpF.js

@@ -0,0 +1,127 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { t as iconEye } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as animate } from "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+import { A as Animation } from "./animation-BLaucX4x-BWLd_Wig.js";
+import { c as createMutationObserver } from "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import { h as hasSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
+const flipTileCss = () => `.text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:flex;flex-direction:column;perspective:1000px;border-radius:var(--theme-flip--border-radius) var(--theme-flip--border-radius) 0 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .flip-tile-header{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}:host .flip-tile-header .header-slot-container{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .content-container{flex-grow:1;margin:1rem}:host .flip-tile-container{display:flex;flex-direction:column;height:100%;transform-style:preserve-3d;border-radius:var(--theme-flip--border-radius) var(--theme-flip--border-radius) 0 0}:host .flip-tile-container .footer{height:3rem;align-items:center;justify-content:center;padding:0 0.5rem}:host .flip-tile-container .footer :first-child{height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .flip-tile-container ::slotted(*){display:flex;flex-direction:column;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host:hover .flip-tile-container .footer ix-icon{color:var(--theme-color-std-text)}:host(.flip-tile-variant-outline){border:solid 1px var(--theme-flip-outline--border-color)}:host(.flip-tile-variant-outline) .flip-tile-container{background-color:var(--theme-flip-outline--background);color:var(--theme-flip-outline--color)}:host(.flip-tile-variant-outline) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-outline-footer--border-color);background-color:var(--theme-flip-outline-footer--background);color:var(--theme-flip-outline-footer--color)}:host(.flip-tile-variant-outline) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-filled){border:solid 1px var(--theme-flip-filled--border-color)}:host(.flip-tile-variant-filled) .flip-tile-container{background-color:var(--theme-flip-filled--background);color:var(--theme-flip-filled--color)}:host(.flip-tile-variant-filled) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-filled-footer--border-color);background-color:var(--theme-flip-filled-footer--background);color:var(--theme-flip-filled-footer--color)}:host(.flip-tile-variant-filled) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-info){border:solid 1px var(--theme-flip-info--border-color)}:host(.flip-tile-variant-info) .flip-tile-container{background-color:var(--theme-flip-info--background);color:var(--theme-flip-info--color)}:host(.flip-tile-variant-info) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-info-footer--border-color);background-color:var(--theme-flip-info-footer--background);color:var(--theme-flip-info-footer--color)}:host(.flip-tile-variant-info) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-warning){border:solid 1px var(--theme-flip-warning--border-color)}:host(.flip-tile-variant-warning) .flip-tile-container{background-color:var(--theme-flip-warning--background);color:var(--theme-flip-warning--color)}:host(.flip-tile-variant-warning) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-warning-footer--border-color);background-color:var(--theme-flip-warning-footer--background);color:var(--theme-flip-warning-footer--color)}:host(.flip-tile-variant-warning) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-alarm){border:solid 1px var(--theme-flip-alarm--border-color)}:host(.flip-tile-variant-alarm) .flip-tile-container{background-color:var(--theme-flip-alarm--background);color:var(--theme-flip-alarm--color)}:host(.flip-tile-variant-alarm) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-alarm-footer--border-color);background-color:var(--theme-flip-alarm-footer--background);color:var(--theme-flip-alarm-footer--color)}:host(.flip-tile-variant-alarm) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-primary){border:solid 1px var(--theme-flip-primary--border-color)}:host(.flip-tile-variant-primary) .flip-tile-container{background-color:var(--theme-flip-primary--background);color:var(--theme-flip-primary--color)}:host(.flip-tile-variant-primary) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-primary-footer--border-color);background-color:var(--theme-flip-primary-footer--background);color:var(--theme-flip-primary-footer--color)}:host(.flip-tile-variant-primary) .flip-tile-container .footer.show-footer{display:flex}`;
+const FlipTile = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.toggle = createEvent(this, "toggle", 7);
+    this.variant = "filled";
+    this.height = 15.125;
+    this.width = 16;
+    this.index = 0;
+    this.isFlipAnimationActive = false;
+    this.hasFooterSlot = false;
+    this.contentItems = [];
+  }
+  watchIndex(newIndex, oldIndex) {
+    if (newIndex === oldIndex) {
+      return;
+    }
+    this.doFlipAnimation(newIndex);
+  }
+  componentDidLoad() {
+    this.observer = createMutationObserver(() => this.updateContentItems());
+    this.observer.observe(this.hostElement, {
+      childList: true
+    });
+  }
+  componentWillLoad() {
+    this.updateContentItems();
+    this.updateContentVisibility(this.index);
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  handleFooterSlotChange(event) {
+    const { target } = event;
+    const slot = target;
+    this.hasFooterSlot = hasSlottedElements(slot);
+  }
+  updateContentItems() {
+    this.contentItems = Array.from(this.hostElement.querySelectorAll("ix-flip-tile-content"));
+  }
+  updateContentVisibility(indexVisible) {
+    this.contentItems.forEach((content, index) => content.contentVisible = index === indexVisible);
+  }
+  toggleIndex() {
+    let newIndex;
+    const oldIndex = this.index;
+    if (this.index >= this.contentItems.length - 1) {
+      newIndex = 0;
+    } else {
+      newIndex = this.index + 1;
+    }
+    const { defaultPrevented } = this.toggle.emit(newIndex);
+    if (defaultPrevented) {
+      this.index = oldIndex;
+      return;
+    }
+    this.doFlipAnimation(newIndex);
+  }
+  doFlipAnimation(index) {
+    if (this.isFlipAnimationActive) {
+      return;
+    }
+    this.isFlipAnimationActive = true;
+    animate(this.hostElement.shadowRoot.querySelector(".flip-tile-container"), {
+      keyframes: {
+        "0%": {
+          transform: "rotateY(0)"
+        },
+        "50%": {
+          transform: "rotateY(90deg)"
+        },
+        "51%": {
+          transform: "rotateY(270deg)"
+        },
+        "100%": {
+          transform: "rotateY(360deg)"
+        }
+      },
+      duration: Animation.defaultTime,
+      easing: "ease-in-out",
+      onComplete: () => {
+        this.index = index;
+        this.updateContentVisibility(this.index);
+      }
+    });
+    setTimeout(() => {
+      this.isFlipAnimationActive = false;
+    }, 2 * Animation.defaultTime);
+  }
+  render() {
+    return h(Host, { key: "a54038f2dbaeffac796822404e2d186c742a5357", class: {
+      [`flip-tile-variant-${this.variant}`]: true
+    }, style: {
+      height: `${this.height}${this.height === "auto" ? "" : "rem"}`,
+      "min-height": `${this.height}${this.height === "auto" ? "" : "rem"}`,
+      "max-height": `${this.height}${this.height === "auto" ? "" : "rem"}`,
+      width: `${this.width}${this.width === "auto" ? "" : "rem"}`,
+      "min-width": `${this.width}${this.width === "auto" ? "" : "rem"}`,
+      "max-width": `${this.width}${this.width === "auto" ? "" : "rem"}`
+    } }, h("div", { key: "0bf12231b1cdeb0afe41d9d45c06fdef4cdedaf4", class: "flip-tile-container" }, h("div", { key: "3e9da89ed0b9cf7595e4c1d317d21ed1b55aa9d7", class: "flip-tile-header" }, h("div", { key: "d4e7cc2a8162254ea3c7c4a0a031346b7a35e3d9", class: "header-slot-container text-l-title" }, h("slot", { key: "dd9e2244a75179ceb4ac9647b403a5e2b01fd2ae", name: "header" })), h("ix-icon-button", { key: "74a5abdba3bf0c90222fc7bf7064742c0ea85b80", icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: "636884dbf0b0143e4f30061cd6e0472c83fe698a", class: "content-container" }, h("slot", { key: "b94b3a488e7a137b06505290ab351724c5f01fca" })), h("div", { key: "a15153c86848df2dd14b1423c686b9655d6fcdc1", class: {
+      footer: true,
+      "show-footer": this.hasFooterSlot
+    } }, h("slot", { key: "68d0585ff19d8a29fc8ccfdb2ec6302f767e3a94", name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) }))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "index": [{
+        "watchIndex": 0
+      }]
+    };
+  }
+};
+FlipTile.style = flipTileCss();
+export {
+  FlipTile as ix_flip_tile
+};

package/build/static/demo/v2/preview/html/assets/ix-group-context-menu_2.entry-DyLYhTWo.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from "./global-7ZbTfMw3.js";
+import { g as getSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
+import { I as iconContextMenu } from "./index-BBzEV-f4-ChQfUIyc.js";
+const groupContextMenuCss = () => `:host{display:block;position:relative;height:2rem;width:2rem;margin-block-start:0.3125rem;margin-inline-end:0.3125rem;margin-inline-start:auto}:host .hide{visibility:collapse}:host ::slotted(ix-dropdown){cursor:default}`;
+const GroupContextMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showContextMenu = false;
+  }
+  getTrigger() {
+    return this.hostElement;
+  }
+  configureDropdown(dropdownElement, triggerElement) {
+    dropdownElement.positioningStrategy = "fixed";
+    dropdownElement.trigger = triggerElement;
+  }
+  onSlotChange() {
+    const slot = this.hostElement.shadowRoot.querySelector("slot");
+    if (!slot) {
+      return;
+    }
+    const elements = getSlottedElements(slot);
+    this.showContextMenu = elements.length !== 0;
+    const dropdownElement = elements.find((elm) => elm.tagName === "IX-DROPDOWN");
+    const triggerElement = this.getTrigger();
+    if (!triggerElement) {
+      return;
+    }
+    if (!dropdownElement) {
+      return;
+    }
+    this.configureDropdown(dropdownElement, triggerElement);
+  }
+  render() {
+    return h(Host, { key: "d3b00dddd05f3ac944f61b8a4098883dffe2acc2" }, h("ix-icon-button", { key: "0d427b8b754020e83b4aa03686a9fea1d8fbffc0", class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: "baef7854222010ff76fc784c50804e4f343eafc3", onSlotchange: () => this.onSlotChange() }));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+GroupContextMenu.style = groupContextMenuCss();
+const groupItemCss = () => `:host{display:flex;min-height:2.25rem;height:2.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host>button,:host>.group-footer{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}:host>button:focus-visible,:host>.group-footer:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host>button:disabled,:host>.group-footer:disabled{cursor:default;pointer-events:none}:host .group-footer{cursor:default;border:none}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:not(.suppress-mouse-states):hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(:not(.suppress-mouse-states).selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:not(.suppress-mouse-states):active):not(.suppress-mouse-states){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(:not(.suppress-mouse-states).selected:active):not(.suppress-mouse-states){background-color:var(--theme-color-ghost--selected-active)}:host([disabled]){pointer-events:none;color:var(--theme-color-weak-text)}`;
+const GroupItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedChanged = createEvent(this, "selectedChanged", 7);
+    this.suppressSelection = false;
+    this.groupFooter = false;
+    this.selected = false;
+    this.disabled = false;
+  }
+  clickListen() {
+    if (this.suppressSelection || this.disabled) {
+      return;
+    }
+    this.selectedChanged.emit(this.hostElement);
+  }
+  render() {
+    if (this.groupFooter) {
+      return h(Host, { class: "suppress-mouse-states" }, h("div", { class: "group-footer" }, h("slot", null)));
+    }
+    return h(Host, { class: {
+      selected: this.selected && !this.suppressSelection
+    } }, h("button", { tabindex: this.disabled ? -1 : 0, disabled: this.disabled }, h("div", { class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon, "aria-label": this.ariaLabelIcon }) : 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 {
+  GroupContextMenu as ix_group_context_menu,
+  GroupItem as ix_group_item
+};