@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-icon.entry-Co7qlYpz.js

@@ -0,0 +1,253 @@
+import { r as registerInstance, g as getElement, h, H as Host, a as getAssetPath } from "./init-6zSVdjuR.js";
+function getCustomAssetUrl() {
+  const assetPath = document.querySelector("meta[name='ix-icons:path']");
+  if (assetPath) {
+    const path = assetPath.getAttribute("content");
+    return path;
+  }
+  return false;
+}
+let parser = null;
+const errorSymbol = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M384,0 L384,384 L0,384 L0,0 L384,0 Z M192,207.085 L57.751,341.333 L326.248,341.333 L192,207.085 Z M42.666,57.751 L42.666,326.248 L176.915,192 L42.666,57.751 Z M341.333,57.751 L207.085,192 L341.333,326.248 L341.333,57.751 Z M326.248,42.666 L57.751,42.666 L192,176.915 L326.248,42.666 Z' transform='translate(64 64)'/></svg>";
+function parseSVGDataContent(content, element) {
+  if (typeof window["DOMParser"] === "undefined") {
+    console.error("DOMParser not supported by your browser.");
+    return "";
+  }
+  if (parser === null) {
+    parser = new window["DOMParser"]();
+  }
+  try {
+    content = decodeURI(content);
+  } catch {
+  }
+  const svgDocument = parser.parseFromString(content, "text/html");
+  const svgElement = svgDocument.querySelector("svg");
+  if (!svgElement) {
+    if (element) {
+      console.error("No valid svg data provided", element);
+    } else {
+      console.error("No valid svg data provided");
+    }
+    return "";
+  }
+  return svgElement.outerHTML;
+}
+let fetchCache;
+const requests = /* @__PURE__ */ new Map();
+const getIconCacheMap = () => {
+  if (typeof window === "undefined") {
+    return /* @__PURE__ */ new Map();
+  }
+  if (!fetchCache) {
+    window.IxIcons = window.IxIcons || {};
+    fetchCache = window.IxIcons.map = window.IxIcons.map || /* @__PURE__ */ new Map();
+  }
+  return fetchCache;
+};
+const isSvgDataUrl = (url) => {
+  if (!url) {
+    return false;
+  }
+  if (typeof url !== "string") {
+    return false;
+  }
+  return url.startsWith("data:image/svg+xml");
+};
+async function fetchSVG(url, element) {
+  const cache = getIconCacheMap();
+  if (cache.has(url)) {
+    return cache.get(url);
+  }
+  if (requests.has(url)) {
+    return requests.get(url);
+  }
+  const fetching = fetch(url).then(async (response) => {
+    const responseText = await response.text();
+    let svgContent = "";
+    if (response.ok) {
+      svgContent = parseSVGDataContent(responseText, element);
+      cache.set(url, svgContent);
+    } else {
+      console.error("Failed to request svg data from", url, "with status code", response.status, element);
+    }
+    return svgContent;
+  }).catch(() => {
+    console.error("Failed to fetch svg data:", url, element);
+    cache.set(url, "");
+    return "";
+  }).finally(() => {
+    requests.delete(url);
+  });
+  return fetching;
+}
+const urlRegex = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:www\.)?(?:\S+\.\S+)(?:\S*)$/i;
+function isValidUrl(url) {
+  return urlRegex.test(url);
+}
+function getIconUrl(name, element) {
+  const customAssetUrl = getCustomAssetUrl();
+  if (customAssetUrl) {
+    return `${customAssetUrl}/${name}.svg`;
+  }
+  let url = `svg/${name}.svg`;
+  try {
+    url = getAssetPath(url);
+  } catch (error) {
+    console.warn(`Could not load icon with name "${name}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to property.`, element);
+  }
+  return url;
+}
+async function resolveIcon(element, iconName) {
+  if (!iconName) {
+    console.warn("No icon was provided", element);
+    return "";
+  }
+  if (isSvgDataUrl(iconName)) {
+    const content = parseSVGDataContent(iconName, element);
+    if (!content) {
+      console.error("Failed to parse icon data", element);
+    }
+    return content;
+  }
+  return loadIcon(iconName, element);
+}
+async function loadIcon(iconName, element) {
+  const cache = getIconCacheMap();
+  if (cache.has(iconName)) {
+    return cache.get(iconName);
+  }
+  if (isValidUrl(iconName)) {
+    return fetchSVG(iconName, element);
+  }
+  const iconUrl = getIconUrl(iconName, element);
+  if (!iconUrl) {
+    return "";
+  }
+  return fetchSVG(iconUrl, element);
+}
+function removePrefix(name, prefix) {
+  if (name.startsWith(prefix)) {
+    name = name.slice(prefix.length);
+    return name.replace(/^(\w)/, (_match, p1) => p1.toLowerCase());
+  }
+  return name;
+}
+function addIcons(icons) {
+  Object.keys(icons).forEach((name) => {
+    const icon = icons[name];
+    name = removePrefix(name, "icon");
+    addIconToCache(name, icon);
+  });
+}
+function addIconToCache(name, icon) {
+  const cache = getIconCacheMap();
+  if (cache.has(name)) {
+    console.warn(`Icon name '${name}' already in cache. Overwritting with new icon data.`);
+  }
+  const svg = parseSVGDataContent(icon);
+  cache.set(name, svg);
+  const toKebabCase = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z0-9])/g, "$1-$2").toLowerCase();
+  if (name != toKebabCase) {
+    cache.set(toKebabCase, svg);
+  }
+}
+const iconCss = () => `:host{display:inline-flex;height:1.5rem;width:1.5rem;min-height:1.5rem;min-width:1.5rem;color:inherit}:host .svg-container{display:block;position:relative;width:100%;height:100%}:host .svg-container svg{display:block;position:relative;height:100%;width:100%}:host .svg-container svg,:host .svg-container svg[fill],:host .svg-container svg [fill]{fill:currentColor !important}:host(.size-12){height:0.75rem;width:0.75rem;min-height:0.75rem;min-width:0.75rem}:host(.size-16){height:1rem;width:1rem;min-height:1rem;min-width:1rem}:host(.size-32){height:2rem;width:2rem;min-height:2rem;min-width:2rem}`;
+const Icon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Size of the icon
+   */
+  size = "24";
+  /**
+   * Color of the icon
+   */
+  color;
+  /**
+   * Use one of our defined icon names e.g. `copy`
+   *
+   * https://ix.siemens.io/docs/icon-library/icons
+   *
+   * or the import variant
+   *
+   * ```
+   * import { rocket } from '@siemens/ix-icons/icons';
+   *
+   * <ix-icon name={rocket}></ix-icon>
+   * ```
+   */
+  name;
+  /**
+   * Only fetch and parse svg data when icon is visible
+   */
+  lazyLoading = false;
+  svgContent;
+  isVisible = false;
+  componentWillLoad() {
+    this.waitForRendering(() => {
+      this.isVisible = true;
+      this.loadIconContent();
+    });
+  }
+  async loadIconContent() {
+    const content = await resolveIcon(this.hostElement, this.name);
+    if (!content) {
+      this.svgContent = parseSVGDataContent(errorSymbol);
+      return;
+    }
+    this.svgContent = content;
+  }
+  waitForRendering(onRender) {
+    if (this.lazyLoading && typeof window !== "undefined" && window.IntersectionObserver) {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            onRender();
+            observer.disconnect();
+          }
+        });
+      }, {
+        rootMargin: "25px"
+      });
+      observer.observe(this.hostElement);
+    } else {
+      onRender();
+    }
+  }
+  render() {
+    const style = {};
+    if (this.color) {
+      style["color"] = `var(--theme-${this.color})`;
+    }
+    return h(Host, { key: "83462a7d7da16587faaa0600b4c13ec8ad106a77", role: "img", style, class: {
+      ["size-12"]: this.size === "12",
+      ["size-16"]: this.size === "16",
+      ["size-24"]: this.size === "24",
+      ["size-32"]: this.size === "32"
+    } }, h("div", { key: "570efdb71fcdd0c61b7c854c6ab3662508aae804", class: "svg-container", innerHTML: this.svgContent, "aria-hidden": "true" }));
+  }
+  static get assetsDirs() {
+    return ["svg"];
+  }
+  static get watchers() {
+    return {
+      "name": [{
+        "loadIconContent": 0
+      }]
+    };
+  }
+};
+Icon.style = iconCss();
+const ixIcon_entry = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ix_icon: Icon
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  addIcons as a,
+  ixIcon_entry as i
+};

package/build/static/demo/v2/preview/html/assets/ix-input-group.entry-DHby_kcV.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { g as getSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
+const inputGroupCss = () => `:host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}: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 .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.5rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.5rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .group-start ::slotted(*),:host(.disabled) .group-end ::slotted(*){opacity:0.4 !important}`;
+const InputGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.disabled = false;
+    this.inputPaddingLeft = 0;
+    this.inputPaddingRight = 0;
+  }
+  get inputElement() {
+    return this.hostElement.querySelector("input");
+  }
+  componentWillLoad() {
+    var _a;
+    const { valid } = this.inputElement.validity;
+    this.inputElement.addEventListener("valid", () => {
+      this.onValidInput();
+    });
+    this.inputElement.addEventListener("invalid", () => {
+      this.onInvalidInput();
+    });
+    this.inputElement.addEventListener("input", () => {
+      this.startSlotChanged();
+    });
+    (_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", () => {
+      this.startSlotChanged();
+    });
+    valid ? this.onValidInput() : this.onInvalidInput();
+    this.observer = new MutationObserver(() => {
+      this.slotChanged();
+      this.startSlotChanged();
+      this.endSlotChanged();
+    });
+    this.observer.observe(this.hostElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    });
+  }
+  componentDidRender() {
+    this.prepareInputElement();
+  }
+  onValidInput() {
+    this.startSlotChanged();
+  }
+  onInvalidInput() {
+    this.startSlotChanged();
+  }
+  prepareInputElement() {
+    if (this.inputElement) {
+      this.inputElement.style.width = "100%";
+      if (this.inputPaddingRight !== 0) {
+        this.inputElement.style.paddingRight = this.inputPaddingRight + "px";
+      } else {
+        this.inputElement.style.paddingRight = "0.5rem";
+      }
+      if (this.inputPaddingLeft !== 0) {
+        this.inputElement.style.paddingLeft = this.inputPaddingLeft + "px";
+      } else {
+        this.inputElement.style.paddingLeft = "0.5rem";
+      }
+    } else {
+      console.warn('You used the ix-input-group without an input tag, e.g. <input class="ix-form-control" />');
+    }
+  }
+  slotChanged() {
+    var _a;
+    this.disabled = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.disabled;
+  }
+  startSlotChanged() {
+    setTimeout(() => {
+      var _a, _b;
+      const startPadding = this.getChildrenWidth(this.startSlotRef);
+      if (startPadding !== 0) {
+        this.inputPaddingLeft = 11 + startPadding;
+      } else {
+        this.inputPaddingLeft = 0;
+      }
+      if (!this.inputElement) {
+        return;
+      }
+      const isInputInvalid = !this.inputElement.validity.valid || this.inputElement.classList.contains("is-invalid");
+      const formWasValidated = ((_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.classList.contains("was-validated")) || ((_b = this.inputElement.form) === null || _b === void 0 ? void 0 : _b.noValidate) === false;
+      if (formWasValidated && isInputInvalid) {
+        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
+        this.inputElement.style.backgroundPosition = `left ${left}px center`;
+        this.inputPaddingLeft += 26;
+      }
+    });
+  }
+  endSlotChanged() {
+    setTimeout(() => {
+      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);
+    });
+  }
+  getChildrenWidth(slotElement) {
+    if (!slotElement) {
+      return 0;
+    }
+    const endElements = getSlottedElements(slotElement);
+    if (endElements.length === 0) {
+      return 0;
+    }
+    let width = 0;
+    endElements.forEach((element) => {
+      width += element.getBoundingClientRect().width;
+    });
+    return width;
+  }
+  render() {
+    return h(Host, { key: "b148a7e4ed2a11c543a98a6247797da3415b9bba", class: { disabled: this.disabled } }, h("div", { key: "6aac120f6d3cad989a4409978760fb752c556711", class: "group group-start" }, h("slot", { key: "f2b68f9fd6b449b560823db825f04a6d154baf91", ref: (el) => this.startSlotRef = el, name: "input-start" })), h("slot", { key: "7aa651f145806d7c24ad00af93d9dfd267a9ce02" }), h("div", { key: "d6214bd6949bd22bdc62582d0f0089f884b5c6af", class: "group group-end" }, h("slot", { key: "8eb65c2a35f67a2436c58cc8b04605f4d80b74f2", ref: (el) => this.endSlotRef = el, name: "input-end" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+InputGroup.style = inputGroupCss();
+export {
+  InputGroup as ix_input_group
+};

package/build/static/demo/v2/preview/html/assets/ix-input.entry-Dpz10z4m.js

@@ -0,0 +1,156 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { t as iconEye, u as iconEyeCancelled } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { H as HookValidationLifecycle } from "./validation-CTBekLDe-sG9H3Ujv.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { m as mapValidationResult, a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, g as checkInternalValidity, i as getAriaAttributesForInput, e as SlotStart, I as InputElement, d as onInputBlurWithChange, o as onEnterKeyChangeEmit, j as onInputFocus, k as checkAllowedKeys, S as SlotEnd } from "./input.fc-C1ytwpkt-bTPpCuNQ.js";
+import "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+import "./animation-BLaucX4x-BWLd_Wig.js";
+import "./a11y-DAzBNVe7-CO1Uj69l.js";
+import "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import "./rwd.util-pXYAoEyc-B7dE3uhl.js";
+const inputCss = () => `input{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea:not([rows]){height:3.25rem}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}: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-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:var(--theme-input--border-thickness)}:host .end-container{right:calc(var(--theme-input--border-thickness) + 0.125rem)}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host .input-wrapper:hover input:not(:disabled):not(:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-wrapper:hover input:not(:disabled):not(:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host input[type=password]::-ms-reveal,:host input[type=password]::-ms-clear{display:none}:host input[type=password]::-webkit-credentials-auto-fill-button,:host input[type=password]::-webkit-textfield-decoration-container,:host input[type=password]::-webkit-contacts-auto-fill-button,:host input[type=password]::-webkit-caps-lock-indicator{visibility:hidden;pointer-events:none}:host .password-eye{margin-left:0.125rem;color:red}:host .password-eye.eye-hidden{display:none}`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let inputIds = 0;
+const Input = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.validityStateChange = createEvent(this, "validityStateChange", 7);
+    this.ixBlur = createEvent(this, "ixBlur", 7);
+    this.ixChange = createEvent(this, "ixChange", 7);
+    if (hostRef.$hostElement$["s-ei"]) {
+      this.formInternals = hostRef.$hostElement$["s-ei"];
+    } else {
+      this.formInternals = hostRef.$hostElement$.attachInternals();
+      hostRef.$hostElement$["s-ei"] = this.formInternals;
+    }
+    this.type = "text";
+    this.value = "";
+    this.required = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.suppressSubmitOnEnter = false;
+    this.textAlignment = "start";
+    this.isInvalid = false;
+    this.isValid = false;
+    this.isInfo = false;
+    this.isWarning = false;
+    this.isInvalidByRequired = false;
+    this.inputType = "text";
+    this.inputRef = makeRef();
+    this.slotEndRef = makeRef();
+    this.slotStartRef = makeRef();
+    this.inputId = `input-${inputIds++}`;
+    this.touched = false;
+  }
+  updateClassMappings(result) {
+    mapValidationResult(this, result);
+  }
+  updateInputType() {
+    this.inputType = this.type;
+  }
+  componentWillLoad() {
+    this.updateFormInternalValue(this.value);
+    this.inputType = this.type;
+  }
+  connectedCallback() {
+    this.disposableChangesAndVisibilityObservers = addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
+  }
+  updatePaddings() {
+    adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.disposableChangesAndVisibilityObservers) === null || _a === void 0 ? void 0 : _a.call(this);
+  }
+  updateFormInternalValue(value) {
+    this.formInternals.setFormValue(value);
+    this.value = value;
+    if (this.inputRef.current && this.touched) {
+      checkInternalValidity(this, this.inputRef.current);
+    }
+  }
+  /** @internal */
+  async getAssociatedFormElement() {
+    return this.formInternals.form;
+  }
+  /** @internal */
+  hasValidValue() {
+    return Promise.resolve(!!this.value);
+  }
+  /**
+   * Returns the native input element used in the text field.
+   */
+  getNativeInputElement() {
+    return this.inputRef.waitForCurrent();
+  }
+  /**
+   * Returns the validity state of the input field.
+   */
+  async getValidityState() {
+    const input = await this.inputRef.waitForCurrent();
+    return Promise.resolve(input.validity);
+  }
+  /**
+   * Focuses the input field
+   */
+  async focusInput() {
+    return (await this.getNativeInputElement()).focus();
+  }
+  /**
+   * Returns whether the text field has been touched.
+   * @internal
+   */
+  isTouched() {
+    return Promise.resolve(this.touched);
+  }
+  render() {
+    var _a, _b;
+    const inputAria = getAriaAttributesForInput(this);
+    return h(Host, { key: "966efdac8aabf6e8eda4c70a70d996b66406e426", class: {
+      disabled: this.disabled,
+      readonly: this.readonly
+    } }, h("ix-field-wrapper", { key: "565c9cf09e3de197bdc6aab9038f05c13eddc311", htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: "73f3a4eb7eeec903148afc9ab0e03409808773ce", class: "input-wrapper" }, h(SlotStart, { key: "5610b1d97825d73045a3d5b20cd0b4da1e323a34", slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: "aea0aeb380fac786174a380531143ee08ca94e48", id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+      onInputBlurWithChange(this, this.inputRef.current, this.value);
+      this.touched = true;
+    }, ariaAttributes: inputAria, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : void 0, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: "3615ad5161239494a9a252ed9aeb3ea493d7d817", slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: "0b0837ae35a5d110794ce32ba3c28db4dce0083a", color: "color-weak-text", class: {
+      "password-eye": true,
+      "eye-hidden": this.type !== "password" || this.disabled
+    }, variant: "tertiary", size: "16", icon: this.inputType === "password" ? iconEye : iconEyeCancelled, onClick: () => {
+      if (this.inputType === "password") {
+        this.inputType = "text";
+        return;
+      }
+      this.inputType = "password";
+    } }))), !!this.maxLength && this.maxLength > 0 && h("ix-typography", { key: "0f3ed7f624fe620793cdd7a8fb2695d54dbcea33", class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_b = this.value) !== null && _b !== void 0 ? _b : "").length, "/", this.maxLength)));
+  }
+  static get formAssociated() {
+    return true;
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "type": [{
+        "updateInputType": 0
+      }]
+    };
+  }
+};
+__decorate([
+  HookValidationLifecycle()
+], Input.prototype, "updateClassMappings", null);
+Input.style = inputCss();
+export {
+  Input as ix_input
+};

package/build/static/demo/v2/preview/html/assets/ix-key-value-list.entry-D4uicCeS.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+const keyValueListCss = () => `:host(.keyValueList) ::slotted(ix-key-value){border-bottom:1px solid var(--theme-color-weak-bdr)}:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)){background:var(--theme-color-ghost-alt)}`;
+const KeyValueList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.striped = false;
+  }
+  render() {
+    return h(Host, { key: "8ac8c1edacddbe11072e692c165c338bdaa6fcdf", class: { keyValueList: true, "keyValueList--striped": this.striped } }, h("slot", { key: "844c573286e6022f4d3f53086b584425306f7f1e" }));
+  }
+};
+KeyValueList.style = keyValueListCss();
+export {
+  KeyValueList as ix_key_value_list
+};

package/build/static/demo/v2/preview/html/assets/ix-key-value.entry-CWdnuFkv.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+const keyValueCss = () => `:host(.keyValue){display:flex;flex-direction:row;align-items:center;gap:1rem}:host(.keyValue) .keyValue__icon{padding:0.25rem 0}:host(.keyValue) .keyValue__content{display:flex;flex-grow:1;align-items:flex-start}:host(.keyValue) .keyValue__content,:host(.keyValue) .keyValue__content .content__label,:host(.keyValue) .keyValue__content .content__value{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.keyValue) .keyValue__content .content__label{color:var(--theme-color-soft-text)}:host(.keyValue) .keyValue__content .content__value{width:100%}:host(.keyValue.keyValue--column){padding:0.5rem 0;border-bottom:1px solid var(--theme-color-soft-bdr)}:host(.keyValue.keyValue--column) .keyValue__content{flex-direction:column}:host(.keyValue.keyValue--column) .keyValue__content .content__label,:host(.keyValue.keyValue--column) .keyValue__content .content__value:not(.has-customValue){padding:2px 0}:host(.keyValue.keyValue--row){padding:0.25rem 0}:host(.keyValue.keyValue--row) .keyValue__content{flex-direction:row;gap:1rem;align-items:center}:host(.keyValue.keyValue--row) .keyValue__content .content__label,:host(.keyValue.keyValue--row) .keyValue__content .content__value:not(.has-customValue){padding:6px 0}:host(.keyValue.keyValue--row) .keyValue__content .content__label{min-width:8rem}`;
+const KeyValue = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.labelPosition = "top";
+  }
+  render() {
+    return h(Host, { key: "ee855752985c8321f4f9608cb957acd093293a9f", class: `keyValue keyValue--${this.labelPosition === "top" ? "column" : "row"}` }, this.icon && h("ix-icon", { key: "6bfb94d5df575189c0df6e86cd65ea25a2dddecc", name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon }), h("div", { key: "028c1ca00511298ae99c1088a2800c0b7ccd97bd", class: "keyValue__content" }, h("div", { key: "1b61165be2e1462f3d18e325236f9175b3a84a0d", class: "content__label" }, this.label), h("div", { key: "d778bac4980281cce97bade4247b8f3b62191e1b", class: {
+      content__value: true,
+      "has-customValue": this.value === void 0
+    } }, this.value !== void 0 ? this.value : h("slot", { name: "custom-value" }))));
+  }
+};
+KeyValue.style = keyValueCss();
+export {
+  KeyValue as ix_key_value
+};

package/build/static/demo/v2/preview/html/assets/ix-kpi.entry-93n7kNbV.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+import { a as iconWarning, v as iconAlarm } from "./index-BBzEV-f4-ChQfUIyc.js";
+const kpiCss = () => `:host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width: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 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{color:var(--theme-kpi-display-value--color);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}:host .kpi-container .kpi-unit{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover,:host:not(.disabled):not(:disabled).hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}`;
+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: iconAlarm, size: "16", "aria-label": this.ariaLabelAlarmIcon });
+      case "warning":
+        return h("ix-icon", { color: "kpi-display-icon--color", name: iconWarning, size: "16", "aria-label": this.ariaLabelWarningIcon });
+      default:
+        return "";
+    }
+  }
+  getTooltipText() {
+    let tooltip = `${this.label}: ${this.value}`;
+    if (this.unit) {
+      tooltip = tooltip.concat(` ${this.unit}`);
+    }
+    return tooltip;
+  }
+  render() {
+    return h(Host, { key: "66e7a14d365489072d53128deddfe610ea2c0589", title: this.getTooltipText(), tabindex: "1", class: {
+      stacked: this.orientation === "vertical"
+    } }, h("div", { key: "724d4ad85701d09ad46ad85d5d62150195545cb1", class: {
+      "kpi-container": true,
+      alarm: this.state === "alarm",
+      warning: this.state === "warning"
+    } }, h("span", { key: "581ec9d9dac67105f5d92fc714511a1578d0833d", class: "kpi-label" }, this.getStateIcon(), h("span", { key: "a81cb7fe8322e8d0682527c7d961a4d1fb32fd58", class: "kpi-label-text" }, this.label)), h("span", { key: "ed7cefc54de202ccab0e9d1ec1adc42eb74f6f78", class: "kpi-value-container" }, h("span", { key: "cade7321b2d3d1dc564480b3ad7f769f079b84d1", class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : "")));
+  }
+};
+Kpi.style = kpiCss();
+export {
+  Kpi as ix_kpi
+};