@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/ix-tree-item.cjs.entry.js

@@ -1,35 +1,69 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
 
-const treeItemCss = () => `:host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}: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 .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tree-node-container .tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}`;
+const treeItemCss = () => `:host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}: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 .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tree-node-container .tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(.selected).hover),:host(:not(.disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(.selected).active),:host(:not(.disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}:host(.disabled){opacity:0.5;pointer-events:none}`;
 
 const TreeItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toggle = index.createEvent(this, "toggle", 7);
         this.itemClick = index.createEvent(this, "itemClick", 7);
-        /**
-         * Has tree item children
-         */
-        this.hasChildren = false;
     }
+    /**
+     * Text
+     */
+    text;
+    /**
+     * Has tree item children
+     */
+    hasChildren = false;
+    /**
+     * Context
+     */
+    context;
+    /**
+     * Disable tree item
+     *
+     * @since 5.0.0
+     */
+    disabled = false;
+    /**
+     * ARIA label for the chevron icon
+     */
+    ariaLabelChevronIcon;
+    /**
+     * Expand/Collapsed toggled
+     */
+    toggle;
+    /**
+     * Click on item not on the expand/collapse icon
+     */
+    itemClick;
     render() {
-        var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: 'd7bab1c02de111458ef484818bcec12c940f1bc4', class: {
-                selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, index.h("div", { key: '43a86c7b782a881ee712d2950b6730fd3badebf9', class: "icon-toggle-container" }, this.hasChildren ? (index.h("ix-icon", { name: index$1.iconChevronRightSmall, size: "24", class: {
-                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
+        const isDisabled = this.disabled || this.context?.isDisabled;
+        return (index.h(index.Host, { key: '61103bf87d16f171025cb5ec3db6a79fcaf47ee1', class: {
+                selected: !!this.context?.isSelected,
+                disabled: !!isDisabled,
+            } }, index.h("div", { key: '376a5bdcaf6367c959d5819d1b0ed6876aa95c03', class: "icon-toggle-container" }, this.hasChildren ? (index.h("ix-icon", { name: index$1.iconChevronRightSmall, size: "24", class: {
+                ['icon-toggle-down']: !!this.context?.isExpanded,
             }, color: "color-std-text", onClick: (e) => {
+                if (isDisabled) {
+                    return;
+                }
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle.emit();
-            }, "aria-label": (_c = this.ariaLabelChevronIcon) !== null && _c !== void 0 ? _c : (((_d = this.context) === null || _d === void 0 ? void 0 : _d.isExpanded)
-                ? 'Collapse tree item'
-                : 'Expand tree item') })) : null), index.h("div", { key: 'b738b82fde5fe41ecc72b0cd765b2acdb17a6328', class: "tree-node-container", onClick: () => {
+            }, "aria-label": this.ariaLabelChevronIcon ??
+                (this.context?.isExpanded
+                    ? 'Collapse tree item'
+                    : 'Expand tree item') })) : null), index.h("div", { key: 'deddcd5f96e7d93b163e1c941ed53f58b77f8f67', class: "tree-node-container", onClick: () => {
+                if (isDisabled) {
+                    return;
+                }
                 this.itemClick.emit();
-            } }, index.h("div", { key: 'a0deb8a582d9b63c8832d9ad1bec89a5bdd83af8', class: "tree-node-text" }, this.text), index.h("slot", { key: '8c71cde365667568a7c67448f0588690cd91b9ce' }))));
+            } }, index.h("div", { key: '3e67b399af3770f38a7613bde42a219a6ab4d38d', class: "tree-node-text" }, this.text), index.h("slot", { key: '9252cecaabba056e57720efd5c904e72c0266bca' }))));
     }
 };
 TreeItem.style = treeItemCss();

package/dist/cjs/ix-tree.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var dropdownController = require('./dropdown-controller-BLOjtc6w.js');
-var tree_types = require('./tree.types-BygtRFW3.js');
+var index = require('./index-BKQkUbyE.js');
+var dropdownController = require('./dropdown-controller-DeBeUVhj.js');
+var tree_types = require('./tree.types-Cs9O1Wtf.js');
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -21,6 +21,28 @@ const addClass = (element, className) => {
     element.classList.add(className);
 };
 class VirtualList {
+    _config;
+    _lastRepaint;
+    _maxElementHeight;
+    _renderAnimationFrame;
+    _averageHeight;
+    _scrollListener = null;
+    _pendingRender = false;
+    static defaultConfig = {
+        width: '100%',
+        height: '100%',
+    };
+    _element;
+    _scroller;
+    _itemHeights;
+    _containerSize;
+    _scrollPaddingBottom;
+    _scrollPaddingTop;
+    _scrollHeight;
+    _itemPositions;
+    _screenItemsLen;
+    _lastFrom;
+    _cachedItemsLen;
     static create(element, userProvidedConfig = VirtualList.defaultConfig) {
         return new VirtualList(element, userProvidedConfig);
     }
@@ -57,8 +79,6 @@ class VirtualList {
         return maxElementHeight;
     }
     constructor(element, userProvidedConfig) {
-        this._scrollListener = null;
-        this._pendingRender = false;
         this._lastRepaint = null;
         this._maxElementHeight = VirtualList.getMaxBrowserHeight();
         this.refresh(element, userProvidedConfig);
@@ -96,14 +116,13 @@ class VirtualList {
             window.cancelAnimationFrame(this._renderAnimationFrame);
         }
         const config = this._config;
-        const scrollContainer = (config === null || config === void 0 ? void 0 : config.scrollContainer) || this._element;
+        const scrollContainer = 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;
+        const oldScrollContainer = this._config?.scrollContainer || this._element;
         if (this._scrollListener && oldScrollContainer) {
             oldScrollContainer.removeEventListener('scroll', this._scrollListener);
         }
@@ -371,10 +390,6 @@ class VirtualList {
         return i;
     }
 }
-VirtualList.defaultConfig = {
-    width: '100%',
-    height: '100%',
-};
 
 const treeCss = () => `:host{display:block}`;
 
@@ -385,22 +400,50 @@ const Tree = class {
         this.nodeToggled = index.createEvent(this, "nodeToggled", 7);
         this.nodeClicked = index.createEvent(this, "nodeClicked", 7);
         this.nodeRemoved = index.createEvent(this, "nodeRemoved", 7);
-        /**
-         * Initial root element will not be rendered
-         */
-        this.root = 'root';
-        /**
-         * Tree model
-         */
-        this.model = {};
-        /**
-         * Selection and collapsed state management
-         */
-        this.context = {};
-        this.updates = new Map();
-        this.hasFirstRender = false;
-        this.dirtyItems = new Set();
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Initial root element will not be rendered
+     */
+    root = 'root';
+    /**
+     * Tree model
+     */
+    model = {};
+    /**
+     * Render function of tree items
+     */
+    renderItem;
+    /**
+     * Selection and collapsed state management
+     */
+    context = {};
+    /**
+     * Enable to toggle items by click on the item
+     * @since 3.0.0
+     */
+    toggleOnItemClick;
+    /**
+     * Context changed
+     */
+    contextChange;
+    /**
+     * Node toggled event
+     */
+    nodeToggled;
+    /**
+     * Node clicked event
+     */
+    nodeClicked;
+    /**
+     * Emits removed nodes
+     */
+    nodeRemoved;
+    hyperlist;
+    updates = new Map();
+    observer;
+    hasFirstRender = false;
+    dirtyItems = new Set();
     updatePadding(element, item) {
         element.style.paddingLeft = item.level + 'rem';
     }
@@ -410,6 +453,7 @@ const Tree = class {
             width: '100%',
             height: '100%',
             itemHeight: 32,
+            scrollerTagName: 'div',
             total: list.length,
             generate: (index) => {
                 const item = list[index];
@@ -420,12 +464,15 @@ const Tree = class {
                  */
                 if (renderedTreeItem && refreshTreeOptions.force === false) {
                     renderedTreeItem.hasChildren = item.hasChildren;
-                    renderedTreeItem.context = Object.assign({}, context);
+                    renderedTreeItem.context = { ...context };
+                    renderedTreeItem.disabled = Boolean(item.disabled || context.isDisabled);
                     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));
+                            const updateRequestedRerender = doUpdate(item, {
+                                ...this.context,
+                            });
                             if (typeof updateRequestedRerender === 'boolean') {
                                 forceRerender = updateRequestedRerender;
                             }
@@ -441,7 +488,7 @@ const Tree = class {
                 };
                 let innerElement = null;
                 if (this.renderItem) {
-                    innerElement = this.renderItem(index, item, list, Object.assign({}, this.context), update);
+                    innerElement = this.renderItem(index, item, list, { ...this.context }, update);
                 }
                 if (innerElement === null) {
                     innerElement = tree_types.renderDefaultItem(item, context, update);
@@ -456,7 +503,10 @@ const Tree = class {
         };
     }
     setContext(id, context) {
-        this.context = Object.assign(Object.assign({}, this.context), { [id]: context });
+        this.context = {
+            ...this.context,
+            [id]: context,
+        };
         this.contextChange.emit(this.context);
     }
     getContext(id) {
@@ -464,24 +514,26 @@ const Tree = class {
             return {
                 isExpanded: false,
                 isSelected: false,
+                isDisabled: this.model[id]?.disabled,
             };
         }
         if (!this.context[id]) {
             this.context[id] = {
                 isExpanded: false,
                 isSelected: false,
+                isDisabled: this.model[id]?.disabled,
             };
         }
         return this.context[id];
     }
     buildTreeList(root, level = 0) {
         const itemList = [];
-        if (root === null || root === void 0 ? void 0 : root.hasChildren) {
+        if (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 }));
+                itemList.push({ ...item, level });
                 if (item.hasChildren && context.isExpanded) {
                     itemList.push(...this.buildTreeList(item, newLevel));
                 }
@@ -523,9 +575,8 @@ const Tree = class {
         }
     }
     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();
+        this.hyperlist?.destroy();
+        this.observer?.disconnect();
     }
     onModelChange() {
         if (this.hasFirstRender && !this.isListInitialized()) {
@@ -540,12 +591,11 @@ const Tree = class {
         ids.forEach((id) => this.dirtyItems.add(id));
     }
     isListInitialized() {
-        var _a;
         //@ts-ignore
-        const itemPositions = (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a._itemPositions;
+        const itemPositions = this.hyperlist?._itemPositions;
         return (itemPositions !== undefined &&
             itemPositions.length &&
-            !(itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions.some((item) => item === undefined || Number.isNaN(item))));
+            !itemPositions?.some((item) => item === undefined || Number.isNaN(item)));
     }
     /**
      * Refresh the list.
@@ -557,11 +607,10 @@ const Tree = class {
         }
     }
     initList() {
-        var _a;
         if (!this.model) {
             return;
         }
-        (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.hyperlist?.destroy();
         const config = this.getVirtualizerOptions(tree_types.defaultRefreshTreeOptions);
         this.hyperlist = new VirtualList(this.hostElement, config);
     }
@@ -591,7 +640,13 @@ const Tree = class {
         if (!item.hasChildren) {
             return;
         }
+        if (item.disabled) {
+            return;
+        }
         const context = this.getContext(id);
+        if (context.isDisabled) {
+            return;
+        }
         context.isExpanded = !context.isExpanded;
         this.nodeToggled.emit({ id, isExpanded: context.isExpanded });
         this.setContext(id, context);
@@ -606,6 +661,10 @@ const Tree = class {
             return;
         }
         const item = this.model[id];
+        const context = this.getContext(id);
+        if (item.disabled || context.isDisabled) {
+            return;
+        }
         const path = event.composedPath();
         const treeIndex = path.indexOf(this.hostElement);
         const treePath = path.slice(0, treeIndex);
@@ -617,12 +676,10 @@ const Tree = class {
             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: id,
@@ -633,9 +690,8 @@ const Tree = class {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (index.h(index.Host, { key: '1274f32c7a5e24c885191db0cf9b0e58715f4eb1', onClick: (event) => this.onTreeItemClick(event) }, index.h("slot", { key: '14196e9cedf85157bfeae56d6e6b769a1c9ed791' })));
+        return (index.h(index.Host, { key: 'a1fa7eaef9868fd912800c99a8f168dd00e27944', onClick: (event) => this.onTreeItemClick(event) }, index.h("slot", { key: '8a61ead359019d6ebd9c8da77d1a7d0bcb393cde' })));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "model": [{
                 "onModelChange": 0

package/dist/cjs/ix-typography.cjs.entry.js

@@ -1,21 +1,29 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.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) {
         index.registerInstance(this, hostRef);
-        /**
-         * Display text bold
-         */
-        this.bold = false;
-        /**
-         * Text decoration
-         */
-        this.textDecoration = 'none';
     }
+    /**
+     * Text format
+     */
+    format;
+    /**
+     * Text color based on theme variables
+     */
+    textColor;
+    /**
+     * Display text bold
+     */
+    bold = false;
+    /**
+     * Text decoration
+     */
+    textDecoration = 'none';
     static getTextColor(color) {
         if (color.startsWith('inv-') || !color.endsWith('-contrast')) {
             return `var(--theme-color-${color}-text)`;
@@ -23,9 +31,8 @@ const IxTypography = class {
         return `var(--theme-color-${color.replace('-', '--')})`;
     }
     render() {
-        var _a;
         let typographyClass = {};
-        typographyClass[`typography-${(_a = this.format) !== null && _a !== void 0 ? _a : 'body'}`] = true;
+        typographyClass[`typography-${this.format ?? 'body'}`] = true;
         if (this.textDecoration !== 'none') {
             typographyClass[`typography-decoration-${this.textDecoration}`] = true;
         }
@@ -36,7 +43,7 @@ const IxTypography = class {
                 color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (index.h(index.Host, { key: '373bb7d6255698f7fed9130834b1ae14fbfd8586', class: typographyClass, style: style }, index.h("slot", { key: 'a6368136d7dc8ce6c0418c5debba69b4ec9fe137' })));
+        return (index.h(index.Host, { key: 'ea3cece07f28bc8d2b3e833285d2349f660b6509', class: typographyClass, style: style }, index.h("slot", { key: '07537b8f6e487024123ef007e7d1b44883b0a991' })));
     }
 };
 IxTypography.style = typographyCss();