@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-tree.entry-CVG3eTH1.js

@@ -0,0 +1,580 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { d as dropdownController } from "./dropdown-controller-D3K9vmFp-CeqyAJWH.js";
+function renderDefaultItem(item, context, update) {
+  const el = document.createElement("ix-tree-item");
+  el.hasChildren = item.hasChildren;
+  el.context = context;
+  el.text = item.data.name;
+  update((updateTreeItem) => {
+    el.text = updateTreeItem.data.name;
+  });
+  return el;
+}
+const defaultRefreshTreeOptions = {
+  force: false
+};
+const isNumber = (input) => !Number.isNaN(Number(input));
+const addClass = (element, className) => {
+  element.classList.add(className);
+};
+class VirtualList {
+  static create(element, userProvidedConfig = VirtualList.defaultConfig) {
+    return new VirtualList(element, userProvidedConfig);
+  }
+  static mergeStyle(element, style) {
+    for (let i in style) {
+      if (element.style[i] !== style[i]) {
+        element.style[i] = style[i];
+      }
+    }
+  }
+  static getMaxBrowserHeight() {
+    const wrapper = document.createElement("div");
+    const fixture = document.createElement("div");
+    VirtualList.mergeStyle(wrapper, {
+      position: "absolute",
+      height: "1px",
+      opacity: 0
+    });
+    VirtualList.mergeStyle(fixture, { height: "1e7px" });
+    wrapper.appendChild(fixture);
+    document.body.appendChild(wrapper);
+    const maxElementHeight = fixture.offsetHeight;
+    document.body.removeChild(wrapper);
+    return maxElementHeight;
+  }
+  constructor(element, userProvidedConfig) {
+    this._scrollListener = null;
+    this._pendingRender = false;
+    this._lastRepaint = null;
+    this._maxElementHeight = VirtualList.getMaxBrowserHeight();
+    this.refresh(element, userProvidedConfig);
+    const config = this._config;
+    const render = () => {
+      this._pendingRender = false;
+      const scrollTop = this._getScrollPosition();
+      const lastRepaint = this._lastRepaint;
+      if (scrollTop === lastRepaint) {
+        return;
+      }
+      const diff = lastRepaint ? scrollTop - lastRepaint : 0;
+      if (!lastRepaint || diff < 0 || diff > this._averageHeight) {
+        let rendered = this._renderChunk();
+        this._lastRepaint = scrollTop;
+        if (rendered !== false && typeof config.afterRender === "function") {
+          config.afterRender();
+        }
+      }
+    };
+    const scrollContainer = config.scrollContainer || element;
+    this._scrollListener = () => {
+      if (!this._pendingRender) {
+        this._pendingRender = true;
+        this._renderAnimationFrame = window.requestAnimationFrame(render);
+      }
+    };
+    scrollContainer.addEventListener("scroll", this._scrollListener, {
+      passive: true
+    });
+    render();
+  }
+  destroy() {
+    if (this._renderAnimationFrame) {
+      window.cancelAnimationFrame(this._renderAnimationFrame);
+    }
+    const config = this._config;
+    const scrollContainer = (config === null || config === void 0 ? void 0 : config.scrollContainer) || this._element;
+    if (this._scrollListener && scrollContainer) {
+      scrollContainer.removeEventListener("scroll", this._scrollListener);
+    }
+  }
+  refresh(element, userProvidedConfig = VirtualList.defaultConfig) {
+    var _a;
+    const oldScrollContainer = ((_a = this._config) === null || _a === void 0 ? void 0 : _a.scrollContainer) || this._element;
+    if (this._scrollListener && oldScrollContainer) {
+      oldScrollContainer.removeEventListener("scroll", this._scrollListener);
+    }
+    this._config = userProvidedConfig;
+    if (!element || element.nodeType !== 1) {
+      throw new Error("HyperList requires a valid DOM Node container");
+    }
+    this._element = element;
+    const config = this._config;
+    const scroller = this._scroller || config.scroller || document.createElement(config.scrollerTagName || "tr");
+    if (typeof config.useFragment !== "boolean") {
+      this._config.useFragment = true;
+    }
+    if (!config.generate) {
+      throw new Error("Missing required `generate` function");
+    }
+    if (!isNumber(config.total)) {
+      throw new Error("Invalid required `total` value, expected number");
+    }
+    if (!Array.isArray(config.itemHeight) && !isNumber(config.itemHeight)) {
+      throw new Error(`
+        Invalid required \`itemHeight\` value, expected number or array
+      `.trim());
+    } else if (isNumber(config.itemHeight)) {
+      this._itemHeights = Array(config.total).fill(config.itemHeight);
+    } else {
+      this._itemHeights = [config.itemHeight];
+    }
+    Object.keys(VirtualList.defaultConfig).filter((prop) => prop in config).forEach((prop) => {
+      const value2 = config[prop];
+      const isValueNumber = isNumber(value2);
+      if (value2 && typeof value2 !== "string" && typeof value2 !== "number") {
+        let msg = `Invalid optional \`${prop}\`, expected string or number`;
+        throw new Error(msg);
+      } else if (isValueNumber) {
+        config[prop] = `${value2}px`;
+      }
+    });
+    const isHorizontal = Boolean(config.horizontal);
+    const value = config[isHorizontal ? "width" : "height"];
+    if (value) {
+      const isValueNumber = isNumber(value);
+      const isValuePercent = isValueNumber ? false : value.slice(-1) === "%";
+      const numberValue = isValueNumber ? parseInt(value, 10) : parseInt(value.replace(/px|%/, ""), 10);
+      const innerSize = window[isHorizontal ? "innerWidth" : "innerHeight"];
+      if (isValuePercent) {
+        this._containerSize = innerSize * numberValue / 100;
+      } else {
+        this._containerSize = isNumber(value) ? value : numberValue;
+      }
+    }
+    const scrollContainer = config.scrollContainer;
+    const scrollerHeight = config.itemHeight * config.total;
+    const maxElementHeight = this._maxElementHeight;
+    if (scrollerHeight > maxElementHeight) {
+      console.warn([
+        "HyperList: The maximum element height",
+        maxElementHeight + "px has",
+        "been exceeded; please reduce your item height."
+      ].join(" "));
+    }
+    const elementStyle = {
+      width: `${config.width}`,
+      height: scrollContainer ? `${scrollerHeight}px` : `${config.height}`,
+      overflow: scrollContainer ? "none" : "auto",
+      position: "relative"
+    };
+    VirtualList.mergeStyle(element, elementStyle);
+    if (scrollContainer) {
+      VirtualList.mergeStyle(config.scrollContainer, { overflow: "auto" });
+    }
+    const scrollerStyle = {
+      opacity: "0",
+      position: "absolute",
+      [isHorizontal ? "height" : "width"]: "1px",
+      [isHorizontal ? "width" : "height"]: `${scrollerHeight}px`
+    };
+    VirtualList.mergeStyle(scroller, scrollerStyle);
+    if (!this._scroller) {
+      element.appendChild(scroller);
+    }
+    const padding = this._computeScrollPadding();
+    this._scrollPaddingBottom = padding.bottom;
+    this._scrollPaddingTop = padding.top;
+    this._scroller = scroller;
+    this._scrollHeight = this._computeScrollHeight();
+    this._itemPositions = this._itemPositions || Array(config.total).fill(0);
+    this._computePositions(0);
+    this._renderChunk(this._lastRepaint !== null);
+    if (typeof config.afterRender === "function") {
+      config.afterRender();
+    }
+    if (this._scrollListener) {
+      const scrollContainer2 = config.scrollContainer || element;
+      scrollContainer2.addEventListener("scroll", this._scrollListener, {
+        passive: true
+      });
+    }
+  }
+  _getRow(i) {
+    const config = this._config;
+    let item = config.generate(i);
+    let height = item.height;
+    if (height !== void 0 && isNumber(height)) {
+      item = item.element;
+      if (height !== this._itemHeights[i]) {
+        this._itemHeights[i] = height;
+        this._computePositions(i);
+        this._scrollHeight = this._computeScrollHeight();
+      }
+    } else {
+      height = this._itemHeights[i];
+    }
+    if (!item || item.nodeType !== 1) {
+      throw new Error(`Generator did not return a DOM Node for index: ${i}`);
+    }
+    addClass(item, config.rowClassName || "vrow");
+    const top = this._itemPositions[i] + this._scrollPaddingTop;
+    VirtualList.mergeStyle(item, {
+      position: "absolute",
+      [config.horizontal ? "left" : "top"]: `${top}px`
+    });
+    return item;
+  }
+  _getScrollPosition() {
+    const config = this._config;
+    if (typeof config.overrideScrollPosition === "function") {
+      return config.overrideScrollPosition();
+    }
+    return this._element[config.horizontal ? "scrollLeft" : "scrollTop"];
+  }
+  _renderChunk(force = false) {
+    const config = this._config;
+    const element = this._element;
+    const scrollTop = this._getScrollPosition();
+    const total = config.total;
+    let from = this._getFrom(scrollTop) - 1;
+    if (from < 0 || from - this._screenItemsLen < 0) {
+      from = 0;
+    }
+    if (!force && this._lastFrom === from) {
+      return false;
+    }
+    this._lastFrom = from;
+    let to = from + this._cachedItemsLen;
+    if (to > total || to + this._cachedItemsLen > total) {
+      to = total;
+    }
+    const fragment = config.useFragment ? document.createDocumentFragment() : [
+      // Sometimes you'll pass fake elements to this tool and Fragments require
+      // real elements.
+    ];
+    const scroller = this._scroller;
+    fragment[config.useFragment ? "appendChild" : "push"](scroller);
+    for (let i = from; i < to; i++) {
+      let row = this._getRow(i);
+      fragment[config.useFragment ? "appendChild" : "push"](row);
+    }
+    if (config.applyPatch) {
+      return config.applyPatch(element, fragment);
+    }
+    element.innerHTML = "";
+    element.appendChild(fragment);
+  }
+  _computePositions(from = 1) {
+    const config = this._config;
+    const total = config.total;
+    if (from < 1) {
+      from = 1;
+    }
+    for (let i = from; i < total; i++) {
+      this._itemPositions[i] = this._itemHeights[i - 1] + this._itemPositions[i - 1];
+    }
+  }
+  _computeScrollHeight() {
+    const config = this._config;
+    const isHorizontal = Boolean(config.horizontal);
+    const total = config.total;
+    const scrollHeight = this._itemHeights.reduce((a, b) => a + b, 0) + this._scrollPaddingBottom + this._scrollPaddingTop;
+    VirtualList.mergeStyle(this._scroller, {
+      opacity: 0,
+      position: "absolute",
+      top: "0px",
+      [isHorizontal ? "height" : "width"]: "1px",
+      [isHorizontal ? "width" : "height"]: `${scrollHeight}px`
+    });
+    const sortedItemHeights = this._itemHeights.slice(0).sort((a, b) => a - b);
+    const middle = Math.floor(total / 2);
+    const averageHeight = total % 2 === 0 ? (sortedItemHeights[middle] + sortedItemHeights[middle - 1]) / 2 : sortedItemHeights[middle];
+    const clientProp = isHorizontal ? "clientWidth" : "clientHeight";
+    const element = config.scrollContainer ? config.scrollContainer : this._element;
+    const containerHeight = element[clientProp] ? element[clientProp] : this._containerSize;
+    this._screenItemsLen = Math.ceil(containerHeight / averageHeight);
+    this._containerSize = containerHeight;
+    this._cachedItemsLen = Math.max(this._cachedItemsLen || 0, this._screenItemsLen * 3);
+    this._averageHeight = averageHeight;
+    return scrollHeight;
+  }
+  _computeScrollPadding() {
+    const config = this._config;
+    const isHoriz = Boolean(config.horizontal);
+    const styles = window.getComputedStyle(this._element);
+    const padding = (location) => {
+      const cssValue = styles.getPropertyValue(`padding-${location}`);
+      return parseInt(cssValue, 10) || 0;
+    };
+    if (isHoriz) {
+      return {
+        bottom: padding("right"),
+        top: padding("left")
+      };
+    } else {
+      return {
+        bottom: padding("bottom"),
+        top: padding("top")
+      };
+    }
+  }
+  _getFrom(scrollTop) {
+    let i = 0;
+    while (this._itemPositions[i] < scrollTop) {
+      i++;
+    }
+    return i;
+  }
+}
+VirtualList.defaultConfig = {
+  width: "100%",
+  height: "100%"
+};
+const treeCss = () => `:host{display:block}`;
+const Tree = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.contextChange = createEvent(this, "contextChange", 7);
+    this.nodeToggled = createEvent(this, "nodeToggled", 7);
+    this.nodeClicked = createEvent(this, "nodeClicked", 7);
+    this.nodeRemoved = createEvent(this, "nodeRemoved", 7);
+    this.root = "root";
+    this.model = {};
+    this.context = {};
+    this.updates = /* @__PURE__ */ new Map();
+    this.hasFirstRender = false;
+    this.dirtyItems = /* @__PURE__ */ new Set();
+  }
+  updatePadding(element, item) {
+    element.style.paddingLeft = item.level + "rem";
+  }
+  getVirtualizerOptions(refreshTreeOptions) {
+    const list = this.buildTreeList(this.model[this.root]);
+    return {
+      width: "100%",
+      height: "100%",
+      itemHeight: 32,
+      total: list.length,
+      generate: (index) => {
+        const item = list[index];
+        const renderedTreeItem = this.hostElement.querySelector(`[data-tree-node-id="${item.id}"]`);
+        const context = this.getContext(item.id);
+        if (renderedTreeItem && refreshTreeOptions.force === false) {
+          renderedTreeItem.hasChildren = item.hasChildren;
+          renderedTreeItem.context = Object.assign({}, context);
+          let forceRerender = this.dirtyItems.has(item.id);
+          if (this.updates.has(item.id)) {
+            const doUpdate = this.updates.get(item.id);
+            if (doUpdate) {
+              const updateRequestedRerender = doUpdate(item, Object.assign({}, this.context));
+              if (typeof updateRequestedRerender === "boolean") {
+                forceRerender = updateRequestedRerender;
+              }
+            }
+          }
+          this.updatePadding(renderedTreeItem, item);
+          if (!forceRerender) {
+            return renderedTreeItem;
+          }
+        }
+        const update = (callback) => {
+          this.updates.set(item.id, callback);
+        };
+        let innerElement = null;
+        if (this.renderItem) {
+          innerElement = this.renderItem(index, item, list, Object.assign({}, this.context), update);
+        }
+        if (innerElement === null) {
+          innerElement = renderDefaultItem(item, context, update);
+        }
+        const el = innerElement;
+        el.setAttribute("data-tree-node-id", item.id);
+        el.style.paddingRight = "1rem";
+        this.updatePadding(el, item);
+        this.dirtyItems.delete(item.id);
+        return el;
+      }
+    };
+  }
+  setContext(id, context) {
+    this.context = Object.assign(Object.assign({}, this.context), { [id]: context });
+    this.contextChange.emit(this.context);
+  }
+  getContext(id) {
+    if (!this.context) {
+      return {
+        isExpanded: false,
+        isSelected: false
+      };
+    }
+    if (!this.context[id]) {
+      this.context[id] = {
+        isExpanded: false,
+        isSelected: false
+      };
+    }
+    return this.context[id];
+  }
+  buildTreeList(root, level = 0) {
+    const itemList = [];
+    if (root === null || root === void 0 ? void 0 : root.hasChildren) {
+      const newLevel = level + 1;
+      root.children.forEach((id) => {
+        const item = this.model[id];
+        const context = this.getContext(id);
+        itemList.push(Object.assign(Object.assign({}, item), { level }));
+        if (item.hasChildren && context.isExpanded) {
+          itemList.push(...this.buildTreeList(item, newLevel));
+        }
+      });
+    }
+    return itemList;
+  }
+  componentDidLoad() {
+    this.initList();
+    this.observer = new MutationObserver((records) => {
+      let removed = [];
+      records.forEach((record) => {
+        removed = [...removed, ...Array.from(record.removedNodes)];
+        record.addedNodes.forEach((an) => {
+          const index = removed.indexOf(an);
+          if (index >= 0) {
+            removed.splice(index, 1);
+          }
+        });
+      });
+      this.nodeRemoved.emit(removed);
+    });
+    this.observer.observe(this.hostElement, {
+      childList: true
+    });
+  }
+  componentWillRender() {
+    this.hasFirstRender = true;
+    if (this.isListInitialized()) {
+      this.refreshTree();
+    } else {
+      this.initList();
+    }
+  }
+  connectedCallback() {
+    if (this.hasFirstRender) {
+      this.initList();
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
+    (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  onModelChange() {
+    if (this.hasFirstRender && !this.isListInitialized()) {
+      this.initList();
+    }
+  }
+  /**
+   * Mark items as dirty.
+   * This will force the list to re-render the items with the given ids.
+   */
+  async markItemsAsDirty(ids) {
+    ids.forEach((id) => this.dirtyItems.add(id));
+  }
+  isListInitialized() {
+    var _a;
+    const itemPositions = (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a._itemPositions;
+    return itemPositions !== void 0 && itemPositions.length && !(itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions.some((item) => item === void 0 || Number.isNaN(item)));
+  }
+  /**
+   * Refresh the list.
+   * This will re-render the list with the current model and context.
+   */
+  async refreshTree(options = defaultRefreshTreeOptions) {
+    if (this.hyperlist) {
+      this.hyperlist.refresh(this.hostElement, this.getVirtualizerOptions(options));
+    }
+  }
+  initList() {
+    var _a;
+    if (!this.model) {
+      return;
+    }
+    (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
+    const config = this.getVirtualizerOptions(defaultRefreshTreeOptions);
+    this.hyperlist = new VirtualList(this.hostElement, config);
+  }
+  getTreeNodeId(target) {
+    let current = target;
+    while (current && current !== this.hostElement) {
+      const id = current.dataset.treeNodeId;
+      if (id) {
+        return id;
+      }
+      current = current.parentElement;
+    }
+    return void 0;
+  }
+  onToggle(event) {
+    const { target } = event;
+    event.preventDefault();
+    event.stopPropagation();
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const id = this.getTreeNodeId(target);
+    if (!id) {
+      return;
+    }
+    const item = this.model[id];
+    if (!item.hasChildren) {
+      return;
+    }
+    const context = this.getContext(id);
+    context.isExpanded = !context.isExpanded;
+    this.nodeToggled.emit({ id, isExpanded: context.isExpanded });
+    this.setContext(id, context);
+  }
+  onTreeItemClick(event) {
+    const { target } = event;
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const id = this.getTreeNodeId(target);
+    if (!id) {
+      return;
+    }
+    const item = this.model[id];
+    const path = event.composedPath();
+    const treeIndex = path.indexOf(this.hostElement);
+    const treePath = path.slice(0, treeIndex);
+    const hasTrigger = dropdownController.pathIncludesTrigger(treePath);
+    if (hasTrigger) {
+      return;
+    }
+    if (!event.defaultPrevented) {
+      for (const itemContext of Object.values(this.context)) {
+        itemContext.isSelected = false;
+      }
+      const context = this.getContext(id);
+      context.isSelected = true;
+      this.setContext(id, context);
+    }
+    if (this.toggleOnItemClick && item.hasChildren) {
+      const context = this.getContext(id);
+      context.isExpanded = !context.isExpanded;
+      this.nodeToggled.emit({
+        id,
+        isExpanded: context.isExpanded
+      });
+      this.setContext(id, context);
+    }
+    this.nodeClicked.emit(id);
+  }
+  render() {
+    return h(Host, { key: "1274f32c7a5e24c885191db0cf9b0e58715f4eb1", onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: "14196e9cedf85157bfeae56d6e6b769a1c9ed791" }));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "model": [{
+        "onModelChange": 0
+      }]
+    };
+  }
+};
+Tree.style = treeCss();
+export {
+  Tree as ix_tree
+};

package/build/static/demo/v2/preview/html/assets/ix-typography.entry-DKOKOJaE.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+const typographyCss = () => `.typography-label,:host(.typography-label){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-sm);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}.typography-label-xs,:host(.typography-label-xs){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--2);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xxl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-label-sm,:host(.typography-label-sm){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--1);line-height:var(--theme-line-height-sm);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}.typography-label-lg,:host(.typography-label-lg){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-1);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-body,:host(.typography-body){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}.typography-body-xs,:host(.typography-body-xs){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--2);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xxl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-body-sm,:host(.typography-body-sm){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--1);line-height:var(--theme-line-height-lg);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}.typography-body-lg,:host(.typography-body-lg){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display,:host(.typography-display){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-3);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xs,:host(.typography-display-xs){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-1);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-sm,:host(.typography-display-sm){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-2);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-lg,:host(.typography-display-lg){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-4);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xl,:host(.typography-display-xl){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-5);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xxl,:host(.typography-display-xxl){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-6);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h6,.h6,.typography-h6,:host(.typography-h6){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--1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h5,.h5,.typography-h5,:host(.typography-h5){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-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h4,.h4,.typography-h4,:host(.typography-h4){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h3,.h3,.typography-h3,:host(.typography-h3){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-2);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h2,.h2,.typography-h2,:host(.typography-h2){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-3);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h1,.h1,.typography-h1,:host(.typography-h1){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-4);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code,:host(.typography-code){font-feature-settings:"clig" off, "liga" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code-lg,:host(.typography-code-lg){font-feature-settings:"clig" off, "liga" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code-sm,:host(.typography-code-sm){font-feature-settings:"clig" off, "liga" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms--1);line-height:var(--theme-line-height-lg);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}.typography-decoration-none,:host(.typography-decoration-none){text-decoration:none !important}.typography-decoration-underline,:host(.typography-decoration-underline){text-decoration:underline !important}.typography-decoration-line-through,:host(.typography-decoration-line-through){text-decoration:line-through !important}.typography-weight-bold,:host(.typography-weight-bold){font-weight:700 !important}a{color:var(--theme-color-primary)}:host{display:block;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(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}:host(.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}`;
+const IxTypography = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bold = false;
+    this.textDecoration = "none";
+  }
+  static getTextColor(color) {
+    if (color.startsWith("inv-") || !color.endsWith("-contrast")) {
+      return `var(--theme-color-${color}-text)`;
+    }
+    return `var(--theme-color-${color.replace("-", "--")})`;
+  }
+  render() {
+    var _a;
+    let typographyClass = {};
+    typographyClass[`typography-${(_a = this.format) !== null && _a !== void 0 ? _a : "body"}`] = true;
+    if (this.textDecoration !== "none") {
+      typographyClass[`typography-decoration-${this.textDecoration}`] = true;
+    }
+    typographyClass["typography-weight-bold"] = this.bold;
+    let style = {};
+    if (this.textColor) {
+      style = {
+        color: IxTypography.getTextColor(this.textColor)
+      };
+    }
+    return h(Host, { key: "373bb7d6255698f7fed9130834b1ae14fbfd8586", class: typographyClass, style }, h("slot", { key: "a6368136d7dc8ce6c0418c5debba69b4ec9fe137" }));
+  }
+};
+IxTypography.style = typographyCss();
+export {
+  IxTypography as ix_typography
+};