@siemens/ix 0.0.0-pr-2238-20251103095443 → 0.0.0-pr-2269-20251117133306

package/dist/cjs/ix-field-label_2.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-C8Xo8L1k.js');
 var a11y = require('./a11y-B_6chCvu.js');
 var makeRef = require('./make-ref-BaH6_YJk.js');
 var validation = require('./validation-CfL71_0d.js');
-var helperTextUtil = require('./helper-text-util-BlElJLxk.js');
+var helperTextUtil = require('./helper-text-util-D2W-yNmK.js');
 require('./index-Dyz3z1FD.js');
 
 function isIxInputFieldComponent(obj) {
@@ -121,7 +121,7 @@ const FormFieldLabel = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '77162f206e9a44c451be1c3e63f36647514df468', onClick: () => this.focusOnClick() }, index.h("label", Object.assign({ key: '73aae16a736c4bcb35e87947128df17dae60b262', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), index.h("ix-typography", { key: 'b73ceb433e4db5c0fb178ba7aebb61c24e1cf37a', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, index.h("slot", { key: '8625032e1c28424e817ec6c2a7aaab73cfaf1900' }), this.required && index.h("span", { key: 'c1b865c52013bbb51ceb8797a324bffbe771eaa9' }, "*")))));
+        return (index.h(index.Host, { key: 'ca4f1ba84a3a19a4d15aa517272c90bebf782e13', onClick: () => this.focusOnClick() }, index.h("label", Object.assign({ key: '44e2386d5dd7c51d3b5a9e1530e986b15ba64d23', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), index.h("ix-typography", { key: 'ab97048f7a521ad398438795ba7a5ccba2571f4c', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, index.h("slot", { key: 'faf628440f832acb412c7f5b40dab4620da785d7' }), this.required && index.h("span", { key: 'd15676e3bf2d645ce2e1fc8f3bd91af23b6ec725' }, "*")))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -174,9 +174,9 @@ const FieldWrapper = class {
             infoText: this.infoText,
             helperText: this.helperText,
         };
-        return (index.h(index.Host, { key: '3ea3695c5b1cb5cb88461edf1a695dbbffc41446' }, this.label && (index.h("div", { key: '6e70790f01487566ca50218321827083273a8b72', class: "field-top" }, index.h("ix-field-label", { key: 'e95f598950e502b0b740aa715b4ba98d29988274', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), index.h("div", { key: '779b3fc2560650307ce95531b49354a9c5d87ecd', class: {
+        return (index.h(index.Host, { key: 'a27a9cefcce30e8dc30ca6a3fd72164227e86fdf' }, this.label && (index.h("div", { key: 'ef4a8585d24c3b0400e85b1a21bd9344e01bcb47', class: "field-top" }, index.h("ix-field-label", { key: '93c9f7cfbbde681956a7676721f1dd0821907e89', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), index.h("div", { key: '3a26cb08a91fc7c0f10de83a5b722b5af66f059f', class: {
                 'slot-wrapper': true,
-            }, ref: this.slotRef }, index.h("slot", { key: 'de4549ef8be697b8298962bb254c33b531cbc915' })), index.h("div", { key: '638eab71346a22e27c6e255d1ffd631d9f714cc7', class: 'field-bottom' }, !this.showTextAsTooltip && index.h(helperTextUtil.HelperText, Object.assign({ key: '37e18fbd7031e597ab332cb0dbc1d49f8fd64204' }, textOptions)), index.h("div", { key: '0b8ac94f2968e14a3d0640ab74f00a3d51eb74a2', class: "bottom-right" }, index.h("slot", { key: 'd8357cafd084a1481b1312d624493bbde299a270', name: "bottom-right" }))), this.showTextAsTooltip === true && helperTextUtil.hasAnyText(textOptions) && (index.h("ix-tooltip", { key: 'd4e277ed85a1cbb2d28779bfee25569cbd717e41', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, index.h(helperTextUtil.HelperText, Object.assign({ key: '0286be2eb095edbfb7f97c794dac74d79c2c4ad0' }, textOptions))))));
+            }, ref: this.slotRef }, index.h("slot", { key: 'fe73a444a23928cee7f7899cc3bb6aef76eefa68' })), index.h("div", { key: 'bc5fa34c5a05e49427e63a87d70db0735a0a0b80', class: 'field-bottom' }, !this.showTextAsTooltip && index.h(helperTextUtil.HelperText, Object.assign({ key: '67abdfcf2448d8df422cd0ee39c162f423e5c564' }, textOptions)), index.h("div", { key: 'fecb02a2e534980491ea776cdc952b1aeea41286', class: "bottom-right" }, index.h("slot", { key: '9a958f810edf477be93394d887724c9763c57f17', name: "bottom-right" }))), this.showTextAsTooltip === true && helperTextUtil.hasAnyText(textOptions) && (index.h("ix-tooltip", { key: 'd3d8810548d267811e5f298fbb41f657abbae27d', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, index.h(helperTextUtil.HelperText, Object.assign({ key: '44c241959d5db7e91c00a08a843a51dfc9307256' }, textOptions))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-filter-chip_2.cjs.entry.js

@@ -24,7 +24,7 @@ const FilterChip = class {
         this.closeClick.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'c778f50984ea53997c6c1188e8d3b030e4dfa4c8', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, index.h("div", { key: 'b6888190e09ae621eb7e004f418f0944eb062a7b', class: "slot-container" }, index.h("slot", { key: 'c8a3e52464c4873d4c949b9c472613b12fd7fee7' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { variant: "tertiary", oval: true, icon: index$1.iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (index.h(index.Host, { key: '03b4a6c34e034efe267406a523a902e85665b351', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, index.h("div", { key: '75c8992cf2e8dc2d2ff76d1579219ff4bef46fd2', class: "slot-container" }, index.h("slot", { key: 'ea52727be5fa2cda2f9ddaa2a7a37a1c7c1f4f91' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { variant: "tertiary", oval: true, icon: index$1.iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -110,7 +110,7 @@ const SelectItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'eda73234f63f14409068135e908af00d7f18b48b' }, index.h("ix-dropdown-item", { key: '14603322f1a339a30aa00b32f6802037af69a187', class: {
+        return (index.h(index.Host, { key: '1602a154d8a1d9b4ee3d1755aea08df7a719cd37' }, index.h("ix-dropdown-item", { key: 'd02799ffee6add3546eafe812785b4ba9532ba6b', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }

package/dist/cjs/ix-flip-tile-content.cjs.entry.js

@@ -15,7 +15,7 @@ const FlipTileContent = class {
         this.contentVisible = false;
     }
     render() {
-        return index.h(index.Host, { key: 'ae499b00da903e80a7cf53e15185d2a5bf9b3819' }, this.contentVisible ? index.h("slot", null) : null);
+        return index.h(index.Host, { key: '264e3539d6c5abcd8716968a4128da99ca191375' }, this.contentVisible ? index.h("slot", null) : null);
     }
 };
 FlipTileContent.style = flipTileContentCss;

package/dist/cjs/ix-flip-tile.cjs.entry.js

@@ -116,7 +116,7 @@ const FlipTile = class {
         }, 2 * animation.Animation.defaultTime);
     }
     render() {
-        return (index.h(index.Host, { key: '25b1720be9a951508fc42a3182abf77ca5239417', class: {
+        return (index.h(index.Host, { key: '32727b4df750f9d1892f365a7e8d729447be05ac', class: {
                 [`flip-tile-variant-${this.variant}`]: true,
             }, style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
@@ -125,10 +125,10 @@ const FlipTile = class {
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, index.h("div", { key: '82eb523c35d63e1974af85d03011d72a60d6a12c', class: "flip-tile-container" }, index.h("div", { key: '8a71a7dcccaaee476cd6b619ef2f9d0dd2f20dcb', class: "flip-tile-header" }, index.h("div", { key: 'b8333d824024998ebfb1b110a659d41cd4f0ceb5', class: "header-slot-container text-l-title" }, index.h("slot", { key: 'cca1a6e9e83af3af0bae04336f7c570d71d79c8f', name: "header" })), index.h("ix-icon-button", { key: '5a97cef1d5669839903b13ec4478f2a1389e5711', icon: index$1.iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), index.h("div", { key: '707bfbb106caf3d37dfff0df91e846f61e466a00', class: "content-container" }, index.h("slot", { key: '61289a19308af72be66d7494b35985bcb8145401' })), index.h("div", { key: 'acfc13e29fa9ea434dbb466a7d5155ed79bf030f', class: {
+            } }, index.h("div", { key: 'e58093dce55ede49f9f1782327c73918ee21d2c6', class: "flip-tile-container" }, index.h("div", { key: 'bd60e44b5b04177c4003936aa15d6539cd093883', class: "flip-tile-header" }, index.h("div", { key: '792d0e39b406fb50561f3c35c0340ee827b568e6', class: "header-slot-container text-l-title" }, index.h("slot", { key: '9e320aef9f89689b594c9555e154c8795dbdb233', name: "header" })), index.h("ix-icon-button", { key: 'dc0a042565001a79ea17e33671f4c2486b702ebf', icon: index$1.iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), index.h("div", { key: 'fa61544ccf0e16884c4d747e0e7cc174216d7906', class: "content-container" }, index.h("slot", { key: '1ed79120c3e926bb5f48a0e1980f5dfb785050f8' })), index.h("div", { key: '543216df0a9e93c9a739b921259e529eb494e751', class: {
                 footer: true,
                 'show-footer': this.hasFooterSlot,
-            } }, index.h("slot", { key: '7bcf5c8d4f037291a6258059e99ae3c1e8ac2585', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
+            } }, index.h("slot", { key: '271f61fc236be2813cec900c788fe4bfcb2c285d', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-group-context-menu_2.cjs.entry.js

@@ -36,7 +36,7 @@ const GroupContextMenu = class {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (index.h(index.Host, { key: '0af5417d3a5a775bc90a40929ddafbff30095b22' }, index.h("ix-icon-button", { key: '2168944a247641423a32816017bf495ad7f3196d', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: index$1.iconContextMenu }), index.h("slot", { key: '41dbc7adfffe4d88cdd2d73ff6701b4a8148084e', onSlotchange: () => this.onSlotChange() })));
+        return (index.h(index.Host, { key: '13eed06b9866e6d59f3972d2940f752d8f245b52' }, index.h("ix-icon-button", { key: '6fc57583df2308b3fa234d8fd675cbcb05a55974', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: index$1.iconContextMenu }), index.h("slot", { key: 'b56d53e0b2154c0eefcd99fdd8eeb508457b7641', onSlotchange: () => this.onSlotChange() })));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -138,27 +138,27 @@ const Group = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3f0490f98871cd258f1a7735587c5c994787b5f3' }, index.h("div", { key: '85a820e8677768ac5952862d6860bf67ddddd06b', class: {
+        return (index.h(index.Host, { key: 'b93d2c8f1290baa2983945ce349b90e95bf18696' }, index.h("div", { key: '3e9ce7ce3402f48bb17612a97bf9bee85767c6aa', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, index.h("div", { key: 'eb02896f695cf74d19a0c17e732886ba2791cae8', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { key: '6c361a6e2bb2b9e9614f726c72d943bb540c6e6f', class: {
+            }, tabindex: "0" }, index.h("div", { key: 'daeb1087643b9f0267b3e2ba13a3973486730888', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { key: '9771b2df1e5b68339aa9c4689de4b2d24bc09341', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), index.h("div", { key: '957fddd2512cb0004889bb8627dca06a24172678', class: "btn-expand-header" }, index.h("ix-icon", { key: '5e6d9f54bd16530b6ee35be0ae2429075574f7af', "data-testid": "expand-collapsed-icon", class: {
+            } }), index.h("div", { key: 'e0e1454e780614a31955720bd7b62d7bfec1b7e0', class: "btn-expand-header" }, index.h("ix-icon", { key: '0742c7515bbac3d3ba0221a5c3b0860d6a1792a2', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? index$1.iconChevronUpSmall : index$1.iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), index.h("div", { key: '7afbcddcae71944c3d89f4671c52faec405072da', class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { key: '434daedde0c193250cc55ecef24a648427d93521', name: "header" }))), this.hasDropdown && (index.h("ix-group-context-menu", { key: '4c3e93b8fe830a7d3e40c9560b5821a44e82a076' }, index.h("slot", { key: '509f13fadad10aa375da8d823692c869031e51c5', name: "dropdown" })))), index.h("div", { key: '1fbc03459ee2ce55b44f2393898ced6fd8d767ca', class: {
+            }, name: this.expanded ? index$1.iconChevronUpSmall : index$1.iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), index.h("div", { key: '4aa355b5a3a7f70977275139779000b2474a4a91', class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { key: 'c782251ecc1044aa3f7923d8f58b7f9c28700b4f', name: "header" }))), this.hasDropdown && (index.h("ix-group-context-menu", { key: '0899d27a51f412aea136b00fcae9ab32859670f4' }, index.h("slot", { key: '76f9b3b94312879ac5e349546172e3d95aefce78', name: "dropdown" })))), index.h("div", { key: 'f6a6aac17d8685244c28b8c6ecd24c966985ba1b', class: {
                 'group-content': true,
-            } }, index.h("div", { key: 'e5c7ab27d286eb9a3e56d906cff40009fcd9c317', style: {
+            } }, index.h("div", { key: 'f805cc015b7bf9c919ea9129500e4af8773b7f63', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, index.h("slot", { key: '270b3877b50ad67ad95ef1bf6ac28aa7a6bfc1ae', onSlotchange: () => {
+            } }, index.h("slot", { key: '703791e124429a91a5798429443c3494d18b262d', onSlotchange: () => {
                 var _a;
                 const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = shadowDom.hasSlottedElements(slot);
-            } }), index.h("ix-group-item", { key: '1a44451e3855c4e7fa22d1aefa4df34692dc3453', class: {
+            } }), index.h("ix-group-item", { key: '5e471c137730667bd459ac80943369b59f81c544', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, index.h("slot", { key: '221292d8be0d15548275e6a24e4f3fcbccd3d2dc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, index.h("slot", { key: '84526685ab81de426a70ecfb52db3211b4a3219b', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-helper-text.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-C8Xo8L1k.js');
 var validation = require('./validation-CfL71_0d.js');
-var helperTextUtil = require('./helper-text-util-BlElJLxk.js');
+var helperTextUtil = require('./helper-text-util-D2W-yNmK.js');
 require('./index-Dyz3z1FD.js');
 
 const helperTextCss = ":host{display:block}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}";
@@ -50,7 +50,7 @@ const HelperText = class {
         this.validationResults = validation.checkFieldClasses(forElement);
     }
     render() {
-        return (index.h(index.Host, { key: 'fc7c96b79fcbff2f9bcf9b45345f16dba5a404c6' }, index.h(helperTextUtil.HelperText, Object.assign({ key: '9e6d2c5fa00aa658c5fa9ae1393537b6255e42f4', helperText: this.helperText,
+        return (index.h(index.Host, { key: '95d6dfb6a163ee5e6b4d7d478780af394427548c' }, index.h(helperTextUtil.HelperText, Object.assign({ key: 'dc7f97b4cb8b2563c1a1089764e25eb63c75b583', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,

package/dist/cjs/ix-icon-button_2.cjs.entry.js

@@ -78,7 +78,7 @@ const IconButton = class {
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (index.h(index.Host, { key: 'bdb302ce6ef1803d43285e1effc3ce70ff9284c8', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '14073614fda1a07d4292094b91092871f05619d3' }, baseButtonProps))));
+        return (index.h(index.Host, { key: '04486b7d26d2b34a920b53f683b3b1b591b95311', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '94936955261d6fc13e78ea98ddb3cf98d3fda058' }, baseButtonProps))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -103,7 +103,7 @@ const Spinner = class {
         this.hideTrack = false;
     }
     render() {
-        return (index.h(index.Host, { key: '99eb9b362588fb2f8f40c8e767066510535c312d' }, index.h("div", { key: '219d9895c8d21ab3c571dd45fd07f5b006b4f34b', class: {
+        return (index.h(index.Host, { key: '6f99a58994e1eb03a05b6af195b843094ebea59b' }, index.h("div", { key: '01ff7d8f23eb80440970086c8791471623cfe424', class: {
                 primary: this.variant === 'primary',
                 [this.size]: true,
                 'hide-track': this.hideTrack,

package/dist/cjs/ix-icon-toggle-button.cjs.entry.js

@@ -75,7 +75,7 @@ const IconToggleButton = class {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (index.h(index.Host, { key: 'cdab0dbaf3a790f3d83fff58d73588504d7ba956', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '6cfe4d3b14eba61a9b80ffcdcd9664a1f815f70f' }, baseButtonProps))));
+        return (index.h(index.Host, { key: 'cac43636bbec0b7a783309bc8acfff59dc899077', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: 'c1476c415753b630b480542ea220854ecb8c56a9' }, baseButtonProps))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-input-group.cjs.entry.js

@@ -120,7 +120,7 @@ const InputGroup = class {
         return width;
     }
     render() {
-        return (index.h(index.Host, { key: 'a3ccc5c517e8c33b0397acc5bd092684f0681ffe', class: { disabled: this.disabled } }, index.h("div", { key: '607ea6b80837a6d2b35c34d000d1ab39bf559ed8', class: "group group-start" }, index.h("slot", { key: '9fcbdb50ef9acbb4ed77f14194370ed9d214f1e9', ref: (el) => (this.startSlotRef = el), name: "input-start" })), index.h("slot", { key: '93aebe48a3812e270607091966656d8d46cdc5e9' }), index.h("div", { key: 'faeb55bffcfcad605a4efe5795f05c313986eeaa', class: "group group-end" }, index.h("slot", { key: '8f52ddaacb0efdb46c6749d86e66064c06d94609', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
+        return (index.h(index.Host, { key: 'c47a7aab493e832b0d2c14d81bbf10b666f23f6c', class: { disabled: this.disabled } }, index.h("div", { key: '44cac00e7f527e3a8f12fbb6a0698cbc4e81feeb', class: "group group-start" }, index.h("slot", { key: '030a2cc484426f92ac56570567d3b6dbec70c615', ref: (el) => (this.startSlotRef = el), name: "input-start" })), index.h("slot", { key: '36a4cd0a41f2dc250cc24024b2f6470d29948e9b' }), index.h("div", { key: 'b6f0a7c2651d27bfd8392176c239190d4fe26d9c', class: "group group-end" }, index.h("slot", { key: '9d9dbff6897c41627ca0d7e133bdecbd68a373b8', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ var index = require('./index-C8Xo8L1k.js');
 var index$1 = require('./index-Dyz3z1FD.js');
 var validation = require('./validation-CfL71_0d.js');
 var makeRef = require('./make-ref-BaH6_YJk.js');
-var input_util = require('./input.util-4AhBphgX.js');
+var input_fc = require('./input.fc-BzxtQeW-.js');
 require('./a11y-B_6chCvu.js');
 require('./mutation-observer-DE0YMfYu.js');
 require('./rwd.util-GTn-vgCJ.js');
@@ -65,6 +65,15 @@ const Input = class {
          * Specifies whether the text field is readonly.
          */
         this.readonly = false;
+        /**
+         * If false, pressing Enter will submit the form (if inside a form).
+         * Set to true to suppress submit on Enter.
+         */
+        this.suppressSubmitOnEnter = false;
+        /**
+         * Text alignment within the input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+         */
+        this.textAlignment = 'start';
         this.isInvalid = false;
         this.isValid = false;
         this.isInfo = false;
@@ -78,7 +87,7 @@ const Input = class {
         this.touched = false;
     }
     updateClassMappings(result) {
-        input_util.mapValidationResult(this, result);
+        input_fc.mapValidationResult(this, result);
     }
     updateInputType() {
         this.inputType = this.type;
@@ -89,10 +98,10 @@ const Input = class {
     }
     connectedCallback() {
         this.disposableChangesAndVisibilityObservers =
-            input_util.addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
+            input_fc.addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
     }
     updatePaddings() {
-        input_util.adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
+        input_fc.adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
     }
     disconnectedCallback() {
         var _a;
@@ -137,15 +146,15 @@ const Input = class {
         return Promise.resolve(this.touched);
     }
     render() {
-        var _a;
-        const inputAria = input_util.getAriaAttributesForInput(this);
-        return (index.h(index.Host, { key: '05bb684da7ab25f4cea5429ec2c166a9c7a9cc21', class: {
+        var _a, _b;
+        const inputAria = input_fc.getAriaAttributesForInput(this);
+        return (index.h(index.Host, { key: '07337a899a3b73d3cb37b1fc84da266d95cff84a', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, index.h("ix-field-wrapper", { key: 'a2cd4a57590b5848de9738a0fbdff0c1c1947abc', 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 }, index.h("div", { key: 'e9369f9d649068b7708fabf29b9c2e25954591a6', class: "input-wrapper" }, index.h(input_util.SlotStart, { key: '4294b9e2329a9e0b9964630d76f64788f127e280', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.InputElement, { key: '750c6a574acb4dac21f7a6143b34ae1482de7d74', 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) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
-                input_util.onInputBlur(this, this.inputRef.current);
+            } }, index.h("ix-field-wrapper", { key: '64461a842b4a784192fd7ab9fdc972bd4810785a', 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 }, index.h("div", { key: 'aac87eb96cb2cba4b9f86527b6d7784d0a015474', class: "input-wrapper" }, index.h(input_fc.SlotStart, { key: '87bcf8d63bd1a4020a680bc2b6def8034a9d65de', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_fc.InputElement, { key: 'f6b81c671a36b00bde716d72a40c17b6cd409c24', 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) => input_fc.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+                input_fc.onInputBlur(this, this.inputRef.current);
                 this.touched = true;
-            }, ariaAttributes: inputAria }), index.h(input_util.SlotEnd, { key: 'ebd005ac85dc9109895d3cd7dcd147a08ee0fc02', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { key: '473f7914b0b2e7bbc970f9eadfed8f8ec96ed761', color: "color-weak-text", class: {
+            }, ariaAttributes: inputAria, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), index.h(input_fc.SlotEnd, { key: 'c8f10373d93bba50d0c633b77fd7ec548e4590d5', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { key: '169c36e6719204de19756a1cf8c0a7c141119417', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password' || this.disabled,
             }, variant: "tertiary", icon: this.inputType === 'password' ? index$1.iconEye : index$1.iconEyeCancelled, onClick: () => {
@@ -154,7 +163,7 @@ const Input = class {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (index.h("ix-typography", { key: 'f5a0bc6e09ce7be919ccf97b34af1ef804c29df7', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)))));
+            } }))), !!this.maxLength && this.maxLength > 0 && (index.h("ix-typography", { key: 'd4041de277ec45534274a6a4a739ff90cd4b98c1', 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 index.getElement(this); }

package/dist/cjs/ix-input.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-input.entry.cjs.js","sources":["src/components/input/input.scss?tag=ix-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@use 'mixins/shadow-dom/component';\n@use 'mixins/validation/form-component';\n@use './input.mixins.scss';\n\n@include input.input-field;\n\n:host {\n  .password-eye {\n    margin-left: 0.125rem;\n    color: red;\n\n    &.eye-hidden {\n      display: none;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  DisposableChangesAndVisibilityObservers,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/**\n * @form-ready\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  @State() inputType = 'text';\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly inputId = `input-${inputIds++}`;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  connectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.waitForCurrent();\n  }\n\n  /**\n   * Returns the validity state of the input field.\n   */\n  @Method()\n  async getValidityState(): Promise<ValidityState> {\n    const input = await this.inputRef.waitForCurrent();\n    return Promise.resolve(input.validity);\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Returns whether the text field has been touched.\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.inputId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <div class=\"input-wrapper\">\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n            <InputElement\n              id={this.inputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => {\n                onInputBlur(this, this.inputRef.current);\n                this.touched = true;\n              }}\n              ariaAttributes={inputAria}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <ix-icon-button\n                color=\"color-weak-text\"\n                class={{\n                  'password-eye': true,\n                  'eye-hidden': this.type !== 'password' || this.disabled,\n                }}\n                variant=\"tertiary\"\n                icon={\n                  this.inputType === 'password' ? iconEye : iconEyeCancelled\n                }\n                onClick={() => {\n                  if (this.inputType === 'password') {\n                    this.inputType = 'text';\n                    return;\n                  }\n\n                  this.inputType = 'password';\n                }}\n              ></ix-icon-button>\n            </SlotEnd>\n          </div>\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography\n              class=\"bottom-text\"\n              slot=\"bottom-right\"\n              textColor=\"soft\"\n            >\n              {(this.value ?? '').length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"names":["makeRef","mapValidationResult","addDisposableChangesAndVisibilityObservers","adjustPaddingForStartAndEnd","getAriaAttributesForInput","h","Host","SlotStart","InputElement","checkAllowedKeys","onInputBlur","SlotEnd","iconEye","iconEyeCancelled","HookValidationLifecycle"],"mappings":"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"}
+{"version":3,"file":"ix-input.entry.cjs.js","sources":["src/components/input/input.scss?tag=ix-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@use 'mixins/shadow-dom/component';\n@use 'mixins/validation/form-component';\n@use './input.mixins.scss';\n\n@include input.input-field;\n\n:host {\n  .password-eye {\n    margin-left: 0.125rem;\n    color: red;\n\n    &.eye-hidden {\n      display: none;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  DisposableChangesAndVisibilityObservers,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/**\n * @form-ready\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * If false, pressing Enter will submit the form (if inside a form).\n   * Set to true to suppress submit on Enter.\n   */\n  @Prop({ reflect: true }) suppressSubmitOnEnter: boolean = false;\n\n  /**\n   * Text alignment within the input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.\n   */\n  @Prop() textAlignment: 'start' | 'end' = 'start';\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  @State() inputType = 'text';\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly inputId = `input-${inputIds++}`;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  connectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.waitForCurrent();\n  }\n\n  /**\n   * Returns the validity state of the input field.\n   */\n  @Method()\n  async getValidityState(): Promise<ValidityState> {\n    const input = await this.inputRef.waitForCurrent();\n    return Promise.resolve(input.validity);\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Returns whether the text field has been touched.\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.inputId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <div class=\"input-wrapper\">\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n            <InputElement\n              id={this.inputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => {\n                onInputBlur(this, this.inputRef.current);\n                this.touched = true;\n              }}\n              ariaAttributes={inputAria}\n              form={this.formInternals.form ?? undefined}\n              suppressSubmitOnEnter={this.suppressSubmitOnEnter}\n              textAlignment={this.textAlignment}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <ix-icon-button\n                color=\"color-weak-text\"\n                class={{\n                  'password-eye': true,\n                  'eye-hidden': this.type !== 'password' || this.disabled,\n                }}\n                variant=\"tertiary\"\n                icon={\n                  this.inputType === 'password' ? iconEye : iconEyeCancelled\n                }\n                onClick={() => {\n                  if (this.inputType === 'password') {\n                    this.inputType = 'text';\n                    return;\n                  }\n\n                  this.inputType = 'password';\n                }}\n              ></ix-icon-button>\n            </SlotEnd>\n          </div>\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography\n              class=\"bottom-text\"\n              slot=\"bottom-right\"\n              textColor=\"soft\"\n            >\n              {(this.value ?? '').length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"names":["makeRef","mapValidationResult","addDisposableChangesAndVisibilityObservers","adjustPaddingForStartAndEnd","getAriaAttributesForInput","h","Host","SlotStart","InputElement","checkAllowedKeys","onInputBlur","SlotEnd","iconEye","iconEyeCancelled","HookValidationLifecycle"],"mappings":"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"}

package/dist/cjs/ix-key-value-list.cjs.entry.js

@@ -13,7 +13,7 @@ const KeyValueList = class {
         this.striped = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'e262c5729ec77f3c9a2beb0a7039cb40422d691e', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, index.h("slot", { key: '72e1498f1f1783e181eb8e83e09c337c5aa564d7' })));
+        return (index.h(index.Host, { key: 'fcc3ec3470c25cac50b88a1006b30be059f778f8', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, index.h("slot", { key: '05645a91f92d7db584bd8235f73979249870e734' })));
     }
 };
 KeyValueList.style = keyValueListCss;

package/dist/cjs/ix-key-value.cjs.entry.js

@@ -13,7 +13,7 @@ const KeyValue = class {
         this.labelPosition = 'top';
     }
     render() {
-        return (index.h(index.Host, { key: '29b48b869917aa09c497c7314c1b3297c70712f3', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (index.h("ix-icon", { key: '50069d0a641035114045d44ae696a8a24f82bc26', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), index.h("div", { key: 'efebf2aafab9c171a61287ac9f3f85e943388830', class: "keyValue__content" }, index.h("div", { key: 'cc01525dfa12c51b3f16170adc448f61c13126e6', class: "content__label" }, this.label), index.h("div", { key: 'd9c9ce50e3b101266fe522e32eb12c2b0b7b6004', class: {
+        return (index.h(index.Host, { key: '7fb93d7b2fbcf2ce8aac64eda186d82a5a45cbe7', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (index.h("ix-icon", { key: '4ec1a309785fba489f0c8d9dfb2c024268c92193', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), index.h("div", { key: '95fb53fe545cd00bc84b6eeeba6c910eff2143cc', class: "keyValue__content" }, index.h("div", { key: '631b09a0969534b81538968c50c886b5337a0765', class: "content__label" }, this.label), index.h("div", { key: 'd45d5050124bf055a05cd71305b2b4e9d30a572d', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (index.h("slot", { name: "custom-value" }))))));

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

@@ -35,13 +35,13 @@ const Kpi = class {
         return tooltip;
     }
     render() {
-        return (index.h(index.Host, { key: 'b60cacc3f468bfb645ab5f8b7217fab907b24d62', title: this.getTooltipText(), tabindex: "1", class: {
+        return (index.h(index.Host, { key: '34fcbb68ba73d08619ef12fd9595c9c684aa3d10', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, index.h("div", { key: 'f191f41a59eb16f11f69aeae0cd367b3e6cc6e97', class: {
+            } }, index.h("div", { key: 'cd4910a41ee179ea21166c80322e5361dd132850', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, index.h("span", { key: '1f77ffa87ad64740858fb9dd46ef3b2d206e6983', class: "kpi-label" }, this.getStateIcon(), index.h("span", { key: '8347d50cc808a3b677c0340452f1482139f91c35', class: "kpi-label-text" }, this.label)), index.h("span", { key: '20c58411fb499cccf20c4d6f92b75c1d875d8fbd', class: "kpi-value-container" }, index.h("span", { key: '49df3a72c7da17998eec8de2be47bb0da4b68495', class: "kpi-value" }, this.value), this.unit ? index.h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, index.h("span", { key: '33226fc8e0561e4db98181be1b6595534561bab7', class: "kpi-label" }, this.getStateIcon(), index.h("span", { key: '06cb693420e43f2475cfae0d8f2217a2770ac5cc', class: "kpi-label-text" }, this.label)), index.h("span", { key: '8a837f1466b2670d473983aaffc2742737fb8a9a', class: "kpi-value-container" }, index.h("span", { key: '5e66113f88a3637aaf83c3482a5625b290e25763', class: "kpi-value" }, this.value), this.unit ? index.h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
 };
 Kpi.style = kpiCss;

package/dist/cjs/ix-layout-auto.cjs.entry.js

@@ -78,7 +78,7 @@ const LayoutForm = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '89fa65872d5cd211c41e8bfda6544155bbbbcc1c' }, index.h("div", { key: 'b6a75e6ce330bbe76c5c3b83a541d3366bfb6866', class: "container" }, index.h("slot", { key: 'd6983232325c2c0081346b059561137e9cf23669' }))));
+        return (index.h(index.Host, { key: '48511195af19191b832713a828ac0945b06a4898' }, index.h("div", { key: '4a51469ffe227db5c361734fc3122a98f7e0fbcc', class: "container" }, index.h("slot", { key: '6ab367e83612df056e40392bced22c5f80457486' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-link-button.cjs.entry.js

@@ -20,13 +20,13 @@ const LinkButton = class {
         this.target = '_self';
     }
     render() {
-        return (index.h(index.Host, { key: 'd7efb1e99ba3ea4fdf9d13f2f32dfcbd8be2a6c2' }, index.h("a", { key: '6b3adc3bf49879f8aa8ec5b07c55d9288c1c49be', title: this.url, tabindex: "0", class: {
+        return (index.h(index.Host, { key: '83b41ef8a3bef06a033a9a20c30a4ae1e83066e8' }, index.h("a", { key: '955dc6e492eec929e592947ec18009d744d1f973', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, index.h("ix-icon", { key: '33d2923c2c1bd042bc9e9ed1d11f273a98380f6b', class: "icon", name: index$1.iconChevronRightSmall, size: "16", "aria-hidden": "true" }), index.h("div", { key: '6eeb77386f6330bff5b209c1f005102468800899', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, index.h("ix-icon", { key: 'b0589b7cedf757244950b1595916f8c838ae603d', class: "icon", name: index$1.iconChevronRightSmall, size: "16", "aria-hidden": "true" }), index.h("div", { key: 'c3ceb43628b0a48d60bbcd6bb54a4ad493ae3de8', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, index.h("slot", { key: '1bd82e08a11323ab61d89c98a4c108ba2849a388' })))));
+            } }, index.h("slot", { key: '2bd6071e8aad57fb13226d8452b0649367c6b750' })))));
     }
 };
 LinkButton.style = linkButtonCss;

package/dist/cjs/ix-menu-about-item.cjs.entry.js

@@ -17,7 +17,7 @@ const MenuAboutItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '65b663ccd628378a95ce42a3e5244a232eff116f' }, index.h("slot", { key: 'c3a34b0a229cb627038be98d9d82d13228a6ca11' })));
+        return (index.h(index.Host, { key: 'c150379d52f7dd0744ec480c35909937abef9c90' }, index.h("slot", { key: '37edb415a550ba73903bd6142162c42fe7be9d34' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

package/dist/cjs/ix-menu-about-news.cjs.entry.js

@@ -22,16 +22,16 @@ const MenuAboutNews = class {
         this.expanded = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'f6796c5d93527d954d18748a60cdbbdab1370af2', class: {
+        return (index.h(index.Host, { key: '61a51cc04b238505c64285babebaaddf1201a9f7', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, index.h("div", { key: '3ff7376bd993e2d8ed6f86ae75b5e594027db70a', class: "banner-container" }, index.h("ix-icon", { key: '6fd35d106b65158700c2255005485e99ad4365a6', color: "color-inv-contrast-text", name: index$1.iconShout, size: "32" }), index.h("svg", { key: '624dcf3a1c412c5480a5f5bd643c7c950c13f70e', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { key: 'eb0c8a2a6713b83f49be3f96bbf93f0a0d375b09', points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { key: '4790036caabea78033ca2272f4f58faf1ab05991', class: "cui-popover-news-header" }, index.h("ix-typography", { key: '4f5a8de94bdcc382e334b8ec6f7483773280ec49', format: "label", bold: true }, this.label)), index.h("ix-icon-button", { key: '71f9249273af952e0a88a22284f24bbdd3e52760', size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+            } }, index.h("div", { key: 'c63c6cab269ef75f01d0396333c5c44ee271d354', class: "banner-container" }, index.h("ix-icon", { key: '2a3b5ced1c9f9fce0f742a34d9862e115807f6fb', color: "color-inv-contrast-text", name: index$1.iconShout, size: "32" }), index.h("svg", { key: '2433dd408f46a4d0f47e5cf075980b6a2ea2ece7', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { key: '386186a0847a504ca07052e1a49ee0c9f6314377', points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { key: 'ec280ef23c279507e186fa0ba0743e64e49d38c8', class: "cui-popover-news-header" }, index.h("ix-typography", { key: '784c5718192c7641e43004439cedcdc0f6285380', format: "label", bold: true }, this.label)), index.h("ix-icon-button", { key: '0c5a987a93067b0641ad0d7cd99e747aaa884d40', size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), index.h("div", { key: 'daf74d24e1c84fb3acf796bb3a9f6e9117dd9496', class: "slot-container" }, index.h("slot", { key: 'd9809a23c9d7635158b22d535f6b06da085992e8' })), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (e) => {
+            } }), index.h("div", { key: '780df8bab613bad3b80a3528947fdc0bab41187c', class: "slot-container" }, index.h("slot", { key: '1992c8d99353665ee6b88b4d21c34869284029d6' })), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (e) => {
                 this.show = false;
                 this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, index.h("div", { key: '994de1ee58d3c39baed52ce729e77379c6c58a55', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, index.h("div", { key: 'b877e4087ebe56fca5c82a7acada5ba7c7ef8abb', id: "arrow" })));
     }
 };
 MenuAboutNews.style = menuAboutNewsCss;

package/dist/cjs/ix-menu-about.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C8Xo8L1k.js');
-var ixMenuSettings_entry = require('./ix-menu-settings-Cdqo0r8E.js');
+var ixMenuSettings_entry = require('./ix-menu-settings-CtWl0bME.js');
 require('./index-Dyz3z1FD.js');
 
 const menuAboutCss = ".text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";
@@ -18,8 +18,10 @@ const MenuAbout = class {
         /** @internal */
         this.show = false;
     }
-    updateTab(label) {
-        ixMenuSettings_entry.setTab(this, label);
+    updateTab(newLabel, oldLabel) {
+        if (newLabel !== oldLabel) {
+            ixMenuSettings_entry.syncTabDisplay(this, newLabel);
+        }
     }
     componentWillLoad() {
         ixMenuSettings_entry.initialize(this);
@@ -28,7 +30,7 @@ const MenuAbout = class {
         index.forceUpdate(this.el);
     }
     render() {
-        return index.h(ixMenuSettings_entry.MenuTabs, { key: 'f39b61fd405141b8e2e7061bd76194ee4beb3a3d', context: this });
+        return index.h(ixMenuSettings_entry.MenuTabs, { key: 'e49c1819db2fcba5b330c776c84e905d6f1aef87', context: this });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-menu-about.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-menu-about.entry.cjs.js","sources":["src/components/menu-about/menu-about.scss?tag=ix-menu-about&encapsulation=shadow","src/components/menu-about/menu-about.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'legacy/fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: vars.$medium-space vars.$default-space vars.$default-space\n    vars.$x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .about-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: vars.$x-large-space;\n    margin-bottom: vars.$small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  ix-menu-about-item {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Content of the header\n   */\n  @Prop() label = 'About & legal information';\n\n  /** @internal */\n  @Prop() show = false;\n\n  /**\n   * Active tab changed\n   * @since 3.0.0\n   */\n  @Event() tabChange!: EventEmitter<string>;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuAboutItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n"],"names":["setTab","initialize","forceUpdate","h","MenuTabs"],"mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ozGAAozG;;MCgC5zG,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAcE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,2BAA2B;;AAGnC,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AA+BrB;AAfC,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAAA,2BAAM,CAAC,IAAI,EAAE,KAAK,CAAC;;IAGrB,iBAAiB,GAAA;QACfC,+BAAU,CAAC,IAAI,CAAC;;IAGlB,gBAAgB,GAAA;AACd,QAAAC,iBAAW,CAAC,IAAI,CAAC,EAAE,CAAC;;IAGtB,MAAM,GAAA;AACJ,QAAA,OAAOC,QAACC,6BAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,OAAO,EAAE,IAAI,GAAI;;;;;;;;;;;"}
+{"version":3,"file":"ix-menu-about.entry.cjs.js","sources":["src/components/menu-about/menu-about.scss?tag=ix-menu-about&encapsulation=shadow","src/components/menu-about/menu-about.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'legacy/fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: vars.$medium-space vars.$default-space vars.$default-space\n    vars.$x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .about-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: vars.$x-large-space;\n    margin-bottom: vars.$small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  ix-menu-about-item {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  syncTabDisplay,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Content of the header\n   */\n  @Prop() label = 'About & legal information';\n\n  /** @internal */\n  @Prop() show = false;\n\n  /**\n   * Active tab changed\n   * @since 3.0.0\n   */\n  @Event() tabChange!: EventEmitter<string>;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuAboutItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(newLabel: string, oldLabel: string) {\n    if (newLabel !== oldLabel) {\n      syncTabDisplay(this, newLabel);\n    }\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n"],"names":["syncTabDisplay","initialize","forceUpdate","h","MenuTabs"],"mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ozGAAozG;;MCgC5zG,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAcE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,2BAA2B;;AAGnC,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAiCrB;IAjBC,SAAS,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC1C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAAA,mCAAc,CAAC,IAAI,EAAE,QAAQ,CAAC;;;IAIlC,iBAAiB,GAAA;QACfC,+BAAU,CAAC,IAAI,CAAC;;IAGlB,gBAAgB,GAAA;AACd,QAAAC,iBAAW,CAAC,IAAI,CAAC,EAAE,CAAC;;IAGtB,MAAM,GAAA;AACJ,QAAA,OAAOC,QAACC,6BAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,OAAO,EAAE,IAAI,GAAI;;;;;;;;;;;"}

package/dist/cjs/ix-menu-avatar.cjs.entry.js

@@ -33,9 +33,9 @@ const MenuAvatar = class {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (index.h(index.Host, { key: 'a782ea05231fff5ebebe2fe12a2775f519f327cf', slot: "ix-menu-avatar" }, index.h("button", { key: '044a34b7db89797213223719a17a1b061cb1bd73', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: 'cb1330bf41ca940bb3bde9025cbb1ea4871d2252', image: this.image, initials: this.initials }), index.h("div", { key: 'ed6465daf36db4b60d3aceefbf6408677173a3f0', class: "avatar-name" }, index.h("span", { key: '571392ee4ae8b60dd252ab92397d31784e4e3a5c', class: "text-default-single", title: this.top }, this.top), index.h("span", { key: '52f9870036a925195723682aab11b103515f2c9d', class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { key: '09e4dd18be61500b17a6315792fb1ba334a5435c', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        return (index.h(index.Host, { key: '6cff313b74cbbd668ed30dd7c04e060867ae0095', slot: "ix-menu-avatar" }, index.h("button", { key: 'c387330d89a9d5740f0af21ec4e7d0f077510064', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: '82f6207b4005ad8a799d29ce52a629d805d60b36', image: this.image, initials: this.initials }), index.h("div", { key: 'c1a6a4e03b3dda5b36a3caa6c7595a32407b9c19', class: "avatar-name" }, index.h("span", { key: 'a8b413ee5ec9a9f60d26ce695df3d9359831867d', class: "text-default-single", title: this.top }, this.top), index.h("span", { key: 'b333a5337d49199f9545eb30361fe5166d8a8725', class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { key: '31b4149a67636711972e1f682da62a60f833e9f3', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
                 mainAxis: 16,
-            } }, index.h("slot", { key: '95885a59468c02dc83b81e47598224761b65f337', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (index.h("ix-menu-avatar-item", { key: 'f79cf9960e1de2ee4b03d797d5da4ec8ae53af9b', label: this.i18nLogout, icon: index$1.iconLogOut, onClick: (e) => {
+            } }, index.h("slot", { key: 'a17ca070258b8b892c647f4cc2429b21562072c1', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (index.h("ix-menu-avatar-item", { key: 'cbc2544543237b2874744c0678838b701ec89d4a', label: this.i18nLogout, icon: index$1.iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
             } })))));
     }