@siemens/ix 4.0.0 → 4.2.0

package/dist/cjs/{ix-menu-settings-Cdqo0r8E.js → ix-menu-settings-CtWl0bME.js}

@@ -17,8 +17,10 @@ const MenuSettings = class {
         /** @internal */
         this.show = false;
     }
-    updateTab(label) {
-        setTab(this, label);
+    updateTab(newLabel, oldLabel) {
+        if (newLabel !== oldLabel) {
+            syncTabDisplay(this, newLabel);
+        }
     }
     componentWillLoad() {
         initialize(this);
@@ -27,7 +29,7 @@ const MenuSettings = class {
         index.forceUpdate(this.el);
     }
     render() {
-        return index.h(MenuTabs, { key: 'a59dd5a81b91ff4ae7f516cb192700bffaee3f84', context: this });
+        return index.h(MenuTabs, { key: 'bff35655d1e57ea807a1d8a6bd0879f8804e3ef4', context: this });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -50,14 +52,19 @@ function getItems(context) {
         : 'ix-menu-about-item'));
 }
 function setTab(context, label) {
+    if (context.activeTabLabel === label) {
+        return;
+    }
     const { defaultPrevented } = context.tabChange.emit(label);
     if (defaultPrevented) {
         return;
     }
     context.activeTabLabel = label;
+}
+function syncTabDisplay(context, label) {
     context.items.forEach((i) => {
         i.style.display = 'none';
-        if (i.label === context.activeTabLabel) {
+        if (i.label === label) {
             i.style.display = 'block';
         }
     });
@@ -112,7 +119,7 @@ const MenuTabs = ({ context }) => {
 exports.MenuSettings = MenuSettings;
 exports.MenuTabs = MenuTabs;
 exports.initialize = initialize;
-exports.setTab = setTab;
-//# sourceMappingURL=ix-menu-settings-Cdqo0r8E.js.map
+exports.syncTabDisplay = syncTabDisplay;
+//# sourceMappingURL=ix-menu-settings-CtWl0bME.js.map
 
-//# sourceMappingURL=ix-menu-settings-Cdqo0r8E.js.map
+//# sourceMappingURL=ix-menu-settings-CtWl0bME.js.map

package/dist/cjs/ix-menu-settings-CtWl0bME.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-menu-settings-CtWl0bME.js","sources":["src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/utils/menu-tabs/menu-tabs-fc.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@use 'mixins/shadow-dom/component';\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 vars.$x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  @include component.ix-component;\n\n  .settings-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  .settings-tabs {\n    margin-bottom: vars.$large-space;\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-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\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   * Popover closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuSettingsItemElement[];\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","/*\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 { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\n\nfunction getItems(\n  context: MenuSettings | MenuAbout\n): HTMLIxMenuSettingsItemElement[] | HTMLIxMenuAboutItemElement[] {\n  return Array.from(\n    context.el.querySelectorAll(\n      context instanceof MenuSettings\n        ? 'ix-menu-settings-item'\n        : 'ix-menu-about-item'\n    )\n  );\n}\n\nexport function setTab(context: MenuSettings | MenuAbout, label: string) {\n  if (context.activeTabLabel === label) {\n    return;\n  }\n  const { defaultPrevented } = context.tabChange.emit(label);\n\n  if (defaultPrevented) {\n    return;\n  }\n  context.activeTabLabel = label;\n}\n\nexport function syncTabDisplay(\n  context: MenuSettings | MenuAbout,\n  label: string\n) {\n  context.items.forEach((i) => {\n    i.style.display = 'none';\n    if (i.label === label) {\n      i.style.display = 'block';\n    }\n  });\n}\n\nexport function initialize(context: MenuSettings | MenuAbout) {\n  context.items = getItems(context);\n\n  if (context.items.length) {\n    const selectedLabel = context.activeTabLabel || context.items[0].label;\n    if (selectedLabel) {\n      setTab(context, selectedLabel);\n    }\n  }\n\n  context.items.forEach((item) => {\n    item.addEventListener('labelChange', (e: CustomEvent) => {\n      context.items = getItems(context);\n\n      if (e.detail.oldLabel === context.activeTabLabel) {\n        context.activeTabLabel = e.detail.newLabel;\n      }\n    });\n  });\n}\n\nexport interface CustomLabelChangeEvent {\n  name: string;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n  nativeEvent: MouseEvent;\n  name: string;\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 { FunctionalComponent, h, Host } from '@stencil/core';\nimport { setTab } from './menu-tabs-utils';\nimport { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\nimport { iconClose } from '@siemens/ix-icons/icons';\n\ninterface MenuTabsProps {\n  context: MenuSettings | MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings | MenuAbout) => {\n  return context.items.map(({ label }) => {\n    return (\n      <ix-tab-item\n        selected={label === context.activeTabLabel}\n        onTabClick={(e) => e.preventDefault()}\n        onClick={() => {\n          if (label) {\n            setTab(context, label);\n          }\n        }}\n      >\n        {label}\n      </ix-tab-item>\n    );\n  });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => {\n  const selectedIndex = context.items.findIndex(\n    (item) => item.label === context.activeTabLabel\n  );\n  return (\n    <Host\n      slot={\n        context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n      }\n      class={{\n        show: context.show,\n      }}\n    >\n      <div\n        class={\n          context instanceof MenuSettings ? 'settings-header' : 'about-header'\n        }\n      >\n        <h2 class=\"text-h2\">{context.label}</h2>\n        <ix-icon-button\n          variant=\"tertiary\"\n          size=\"24\"\n          icon={iconClose}\n          iconColor=\"color-soft-text\"\n          onClick={(e) =>\n            context.close.emit({\n              name:\n                context instanceof MenuSettings\n                  ? 'ix-menu-settings'\n                  : 'ix-menu-about',\n              nativeEvent: e,\n            })\n          }\n        ></ix-icon-button>\n      </div>\n      <ix-tabs selected={selectedIndex !== -1 ? selectedIndex : 0}>\n        {getTabItems(context)}\n      </ix-tabs>\n      <slot></slot>\n    </Host>\n  );\n};\n"],"names":["forceUpdate","h","Host","iconClose"],"mappings":"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"}

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

@@ -17,7 +17,7 @@ const MenuSettingsItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '82d134ab9cdb58a29c6fd02a165a9925a9a55912' }, index.h("slot", { key: 'dfb95edb5325b70072cc422a48c78f8a50a9b589' })));
+        return (index.h(index.Host, { key: '69dac244a2c3b427237e8dceec64fad9c16600e9' }, index.h("slot", { key: 'ccfc87d1f061f0d4195f943dec3782b655626aae' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var ixMenuSettings_entry = require('./ix-menu-settings-Cdqo0r8E.js');
+var ixMenuSettings_entry = require('./ix-menu-settings-CtWl0bME.js');
 require('./index-C8Xo8L1k.js');
 require('./index-Dyz3z1FD.js');
 

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

@@ -450,44 +450,44 @@ const Menu = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '7c30f31880d51956013f87fe21ea0abf4129f67b', class: {
+        return (index.h(index.Host, { key: 'b36f27c9c7b9342fd8f984dd5d00ad73d735b2ff', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, index.h("nav", { key: 'ff157fa24a58cd522b33ac035d99086a8dfec7bc', class: {
+            }, slot: "menu" }, index.h("nav", { key: '4f4b1378ddfe2cb243d0a5305679c98084490e8b', class: {
                 menu: true,
                 expanded: this.expand,
-            } }, index.h("div", { key: 'a3935afe8ee867e934f1c778583d22d11f5cf957', class: "menu-buttons" }, this.breakpoint !== 'sm' && (index.h("ix-menu-expand-icon", { key: '067059b37dc7e99ac05bdf3f96f4f417403e1915', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
-            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (index.h("ix-icon-button", { key: 'd9c3d29552e6e8adeba3c44c04a563da430ea9b8', onClick: () => {
+            } }, index.h("div", { key: '70d117cfe299bdb3f3b0ed9639d5ee83bfc33cf1', class: "menu-buttons" }, this.breakpoint !== 'sm' && (index.h("ix-menu-expand-icon", { key: 'fa76b253e6cf1ae30e3257cc3c186dc23215b516', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (index.h("ix-icon-button", { key: '927aede1c7824c6c21eed072e7dba6db8d5f8df5', onClick: () => {
                 this.showAppSwitch();
-            }, icon: index$1.iconApps, variant: "subtle-tertiary" }))), index.h("div", { key: 'bf2a827004f7e2d337ba55fc288e7abe418ec6dd', id: "menu-tabs", style: {
+            }, icon: index$1.iconApps, variant: "subtle-tertiary" }))), index.h("div", { key: '795f32dc8f94404a75c9a0d0cfb7c8e8d429d8d2', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { key: 'ee11e15bb3d0e4b6cd3263788aac1eba043dae99', class: "tabs-shadow-container" }, index.h("div", { key: '0803887ba70d6558cf5e4a890e0eca39b49ff518', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { key: '4d609cfd70659c0adfcb1cfca0485edff3b05d08', class: "tabs-shadow-container" }, index.h("div", { key: 'b8b81a13d75c56f9a460f0db382acef185b1c11c', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), index.h("div", { key: '7e43e530408b8a5408e2a0c00d4e89b695d0d871', class: {
+            } }), index.h("div", { key: '1095f30e782665f9d66d7f2619eb3a68806ccf54', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, index.h("div", { key: 'e9f5421b30d3505a1a80ecdea28d78770a2f25fd', class: "menu-avatar" }, index.h("slot", { key: 'c0d0ab2965a271540b41165eaf95fcd13072ae07', name: "ix-menu-avatar" })), index.h("slot", { key: '3b427bbba570fc61bbe44f6138f338025b144725', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (index.h("slot", null)) : null), index.h("div", { key: 'c7bb85da2610aef008b75fe560af46aac221ffc5', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, index.h("div", { key: '55ec2b8a3b535c8ed7dfc4c80ecdeedf9add4d34', class: "menu-avatar" }, index.h("slot", { key: 'a893aea63d56c2b4e7fd5997904704639257f65b', name: "ix-menu-avatar" })), index.h("slot", { key: '85505735fc0f7c9075340389597565bd99e64801', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (index.h("slot", null)) : null), index.h("div", { key: '7a0013bb20500931471b1ee1273615d0ae740d11', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), index.h("div", { key: '80b67bd3408917c424661ff603b6b12a08b5c256', class: "bottom-tab-divider" }), this.settings ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), index.h("div", { key: '92a48e39684e2bbbb6078dcafc5c8b7103a693de', class: "bottom-tab-divider" }), this.settings ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: index$1.iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: index$1.iconLightDark, label: this.i18nToggleTheme })) : null, index.h("div", { key: '93bc9bfe4c557cbfcc66eaac5cc21118578b050a', onClick: (e) => this.onMenuItemsClick(e) }, index.h("slot", { key: '9910c841207e3a62b3699cc5e54843155557bb65', name: "bottom" })), index.h("div", { key: 'f3bd210849640e293625b418f928eb12eb6bb8a5', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: index$1.iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: index$1.iconLightDark, label: this.i18nToggleTheme })) : null, index.h("div", { key: '2a5bad2eb493be6ee59fc101fab300bdb154feb0', onClick: (e) => this.onMenuItemsClick(e) }, index.h("slot", { key: '5a1e19962a88ceeb1f82ac385dba49d0c311e3d7', name: "bottom" })), index.h("div", { key: '65802881403efad9dbae84ef9bf5d441e3915150', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: index$1.iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), index.h("div", { key: '54785101f98f046af558820493555a3d4739ace3', class: {
+            }, icon: index$1.iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), index.h("div", { key: 'e6dd7e53abbd5e4ce11cc5d2be882dd52e335275', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, index.h("div", { key: '740f1a98fe2bafb8da7d5457395dee136a5ce9ec', class: 'menu-overlay-container' }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null), index.h("div", { key: '3e2f774925487e9da132a3d7b3633486bece3976', class: 'menu-overlay-container' }, this.showAbout ? index.h("slot", { name: "ix-menu-about" }) : null))));
+            } }, index.h("div", { key: 'd8a49e3983b5d060190f1440b4aacd44243894a8', class: 'menu-overlay-container' }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null), index.h("div", { key: '92ddf6c21d3d08c5d1961200ac598a6135c9ef89', class: 'menu-overlay-container' }, this.showAbout ? index.h("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-message-bar.cjs.entry.js

@@ -42,7 +42,7 @@ const MessageBar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '22bbc355ba3fca3209fab0491ae186f59bb64b02' }, index.h("div", { key: 'a84b47392ddfd8a8b0863ce99aa17985fbf39b4d', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { key: '6528c7bd5a8b484858c97ca0e072704dcf37ad1c', color: this.color, name: this.icon }), index.h("div", { key: '07eed52e33baa107ebdebb10ef478d775901faf3', class: "message-content" }, index.h("slot", { key: 'cd5981304f6998d55edc38fa3fb0c67e139b8278' })), !this.persistent && (index.h("ix-icon-button", { key: 'ac6a235e1080bbb942c102f7c0e5c04672176557', icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (index.h(index.Host, { key: '538fcc08ad07fe808f424e067a361f4a56f4c0ec' }, index.h("div", { key: '4a75052efe1b22c247dcfcd298aabbd1098ff7b6', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { key: 'd348829692e38a1023e044834aefa45516b4d916', color: this.color, name: this.icon }), index.h("div", { key: '0ac0a509efe1dd246f7732660e4cf16416c8655d', class: "message-content" }, index.h("slot", { key: '6143bfa9cf39d32d149c2893b7712358337833c9' })), !this.persistent && (index.h("ix-icon-button", { key: 'b118c91956af0fd00d02cfefdb7da36d46f2d360', icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }

package/dist/cjs/ix-modal-content_2.cjs.entry.js

@@ -11,7 +11,7 @@ const ModalContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '91592e2a2681326a99cafd1709581a29ecf48d61' }, index.h("slot", { key: '259ab95ce19cafdc7dbbe67c362e424590fe02c8' })));
+        return (index.h(index.Host, { key: 'b45bdd4b47ca580de9e3419c9c081f8e30b1da09' }, index.h("slot", { key: 'ad2d19f3f3053ea927d6d45ff54bcfff1e74345d' })));
     }
 };
 ModalContent.style = modalContentCss;
@@ -49,7 +49,7 @@ const ModalHeader = class {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (index.h(index.Host, { key: 'b41da77283ecc896aa62fced50290fe487526fbd' }, this.icon ? (index.h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, index.h("div", { key: 'c084a12acb4d137a55e45b0f98e662d181b1901e', class: "modal-title" }, index.h("ix-typography", { key: '9e82bdb91af4273454254d3c2fc03803d787dde1', format: "h5" }, index.h("slot", { key: '209d60c82e6b12c28d95eb538e8f4499becfeb8e' }))), !this.hideClose ? (index.h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: index$1.iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (index.h(index.Host, { key: '7dd6b1964ed537b20a90f9007afb767414fad240' }, this.icon ? (index.h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, index.h("div", { key: '4c6d8c7716ba99eed36e7b9c741dce4ebb0bb092', class: "modal-title" }, index.h("ix-typography", { key: '1db5a1e1cd434c67578a8c276b497284e5447f8d', format: "h5" }, index.h("slot", { key: '920833a9e7d2c8e15dc4bff1b18c6daa8a9ee4b5' }))), !this.hideClose ? (index.h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: index$1.iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-modal-footer.cjs.entry.js

@@ -9,7 +9,7 @@ const ModalFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'bab5a43ac92a13caca46d241091c27c773990aba' }, index.h("slot", { key: 'fefe386636d486a7e1d4b35a23eafe0d04b7270c' })));
+        return (index.h(index.Host, { key: '11eb649edd163b25fdeb4b533bf513a861c1d7ec' }, index.h("slot", { key: '9a2cb92b8df8220ed2307d98ec7a1ce6a6d9196b' })));
     }
 };
 ModalFooter.style = modalFooterCss;

package/dist/cjs/ix-modal-loading.cjs.entry.js

@@ -9,7 +9,7 @@ const ModalLoading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'dac65dc36124b038728e843240d126432d85e987' }, index.h("ix-spinner", { key: '639371732304b733f79cf8498e46442ff6a442df', variant: "primary" }), index.h("span", { key: 'a9bf046b8c00552a4135cc5046789027abd1803e', class: 'loading-text' }, index.h("slot", { key: '362185ef3806ddb57c90f6fdf776cb3563baf903' }))));
+        return (index.h(index.Host, { key: '404214a461e55c9ee78aad8dc277dab5be8a9b42' }, index.h("ix-spinner", { key: '96278c04d8c7798b411f6807e5c7a1ea26b03d45', variant: "primary" }), index.h("span", { key: 'cad3eec78defa832ffc679f86941ffc301bc5b5c', class: 'loading-text' }, index.h("slot", { key: '96cf92b74f62260ee97b7bdae73557a2ee5517ec' }))));
     }
 };
 ModalLoading.style = modalLoadingCss;

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

@@ -189,17 +189,17 @@ const Modal = class {
         this.ariaAttributes = a11y.a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (index.h(index.Host, { key: '192ded80682348ff755d91a613faaca1a8b0753f', class: {
+        return (index.h(index.Host, { key: '0170729f63356223c39bcd6b0bb7124b2036f2c4', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
-            } }, index.h("div", { key: '709679987ecf4e1b1e03374c7c9373332fe01a74', class: "dialog-backdrop" }, index.h("dialog", { key: '10222a2e51235c3be195eb6b2e7d2ad2e1d887f9', "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, index.h("div", { key: '436b9f2efce7279defa936c9ee79fa44d090e388', class: "dialog-backdrop" }, index.h("dialog", { key: 'e3bc4891433993a5dcbe186011fd91d70277ca3d', "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, index.h("slot", { key: 'a9c321d71d3e08d581bb2e6ad9e3d377663a2c52' })))));
+            } }, index.h("slot", { key: '5a3e86b9c04f8e1564be6026b0352940978f0666' })))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -2,9 +2,9 @@
 
 var index = require('./index-C8Xo8L1k.js');
 var index$1 = require('./index-Dyz3z1FD.js');
-var validation = require('./validation-CfL71_0d.js');
+var validation = require('./validation-DTmSqO2d.js');
 var makeRef = require('./make-ref-BaH6_YJk.js');
-var input_util = require('./input.util-4AhBphgX.js');
+var input_fc = require('./input.fc-DrxRYq_G.js');
 require('./a11y-B_6chCvu.js');
 require('./mutation-observer-DE0YMfYu.js');
 require('./rwd.util-GTn-vgCJ.js');
@@ -14,7 +14,7 @@ require('./animation-DtTuOXbI.js');
 const numberInputCss = "input{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;height:3.25rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:0}:host .end-container{right:0}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host .input-wrapper.show-stepper-buttons input[type=number]{min-width:6rem}:host .number-stepper-container{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;margin-right:0.25rem}:host .number-stepper-container.container-hidden{display:none}";
 
 /*
- * SPDX-FileCopyrightText: 2024 Siemens AG
+ * SPDX-FileCopyrightText: 2025 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -32,6 +32,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 let numberInputIds = 0;
+const INVALID_NUMBER_INPUT_REGEX = /[^\dEe+\-.,]/;
 const NumberInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -46,11 +47,11 @@ const NumberInput = class {
             hostRef.$hostElement$["s-ei"] = this.formInternals;
         }
         /**
-         * The value of the input field
+         * The value of the input field. Supports numeric values, scientific notation (1E6, 1E-6), or undefined for empty.
          */
         this.value = 0;
         /**
-         * Indicates if the field is required
+         * Indicates if the field is required. When required, empty values (undefined) are not accepted.
          */
         this.required = false;
         /**
@@ -61,6 +62,27 @@ const NumberInput = class {
          * Indicates if the field is read-only
          */
         this.readonly = false;
+        /**
+         * Step value to increment or decrement the input value. Default step value is 1.
+         *
+         */
+        this.step = 1;
+        /**
+         * 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 number input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+         */
+        this.textAlignment = 'end';
+        /**
+         * If true, the valueChange event will return null instead of 0 for an empty input state.
+         * This property will be removed in 5.0.0 and this behaviour will be default.
+         *
+         * @since 4.1.0
+         */
+        this.allowEmptyValueChange = false;
         this.isInvalid = false;
         this.isValid = false;
         this.isInfo = false;
@@ -71,28 +93,142 @@ const NumberInput = class {
         this.slotStartRef = makeRef.makeRef();
         this.numberInputId = `number-input-${numberInputIds++}`;
         this.touched = false;
+        this.handleInputChange = (inputValue) => {
+            const parsedValue = this.convertNumberStringToFloat(inputValue);
+            const isScientificNotation = this.isScientificNotation(inputValue.trim());
+            if (isScientificNotation) {
+                this.formInternals.setFormValue(inputValue);
+            }
+            this.handleValueChangeEvent(parsedValue);
+        };
+        this.handleBlur = () => {
+            if (!this.inputRef.current)
+                return;
+            const inputValue = this.inputRef.current.value;
+            const parsedValue = this.convertNumberStringToFloat(inputValue);
+            if (parsedValue !== undefined) {
+                this.inputRef.current.value = this.formatValue(parsedValue);
+            }
+            this.updateFormInternalValue(parsedValue);
+            input_fc.onInputBlur(this, this.inputRef.current);
+            this.touched = true;
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.handleStepOperation('up');
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.handleStepOperation('down');
+                    break;
+            }
+        };
+        this.handleBeforeInput = (e) => {
+            var _a, _b;
+            if (this.disabled || this.readonly)
+                return;
+            if (e.inputType === 'insertText') {
+                const character = e.data;
+                if (character && INVALID_NUMBER_INPUT_REGEX.test(character)) {
+                    e.preventDefault();
+                }
+            }
+            if (e.inputType === 'insertFromPaste') {
+                const dt = e.dataTransfer || e.clipboardData;
+                const text = (_b = (_a = dt === null || dt === void 0 ? void 0 : dt.getData) === null || _a === void 0 ? void 0 : _a.call(dt, 'text')) !== null && _b !== void 0 ? _b : '';
+                if (INVALID_NUMBER_INPUT_REGEX.test(text)) {
+                    e.preventDefault();
+                }
+            }
+        };
+        this.handlePaste = (e) => {
+            var _a, _b;
+            // Fallback for browsers that don’t fire beforeinput for paste
+            const text = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            if (INVALID_NUMBER_INPUT_REGEX.test(text)) {
+                e.preventDefault();
+            }
+        };
+    }
+    onValueChange(newValue) {
+        this.updateFormInternalValue(newValue);
     }
     updateClassMappings(result) {
-        input_util.mapValidationResult(this, result);
+        input_fc.mapValidationResult(this, result);
     }
     componentWillLoad() {
         this.updateFormInternalValue(this.value);
     }
     connectedCallback() {
         this.disposableChangesAndVisibilityObservers =
-            input_util.addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
+            input_fc.addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
     }
     disconnectedCallback() {
         var _a;
         (_a = this.disposableChangesAndVisibilityObservers) === null || _a === void 0 ? void 0 : _a.call(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);
+    }
+    convertNumberStringToFloat(input) {
+        if (!input || input.trim() === '') {
+            return undefined;
+        }
+        const parsed = Number.parseFloat(input);
+        return Number.isNaN(parsed) ? undefined : parsed;
+    }
+    isScientificNotation(input) {
+        const parsed = Number.parseFloat(input);
+        return (!Number.isNaN(parsed) && Number.isFinite(parsed) && /[eE]/.test(input));
+    }
+    formatValue(value) {
+        if (value === undefined || value === null) {
+            return '';
+        }
+        return value.toString();
+    }
+    handleValueChangeEvent(value) {
+        this.valueChange.emit(this.allowEmptyValueChange ? value : (value !== null && value !== void 0 ? value : 0));
     }
     updateFormInternalValue(value) {
-        this.formInternals.setFormValue(value.toString());
+        const formValue = value !== undefined && value !== null ? value.toString() : '';
+        this.formInternals.setFormValue(formValue);
         this.value = value;
     }
+    handleStepOperation(operation) {
+        var _a, _b;
+        if (!this.inputRef.current) {
+            return;
+        }
+        const currentValue = (_a = this.value) !== null && _a !== void 0 ? _a : 0;
+        const stepValue = typeof this.step === 'string'
+            ? Number.parseFloat(this.step)
+            : ((_b = this.step) !== null && _b !== void 0 ? _b : 1);
+        let newValue;
+        if (operation === 'up') {
+            newValue = currentValue + stepValue;
+        }
+        else {
+            newValue = currentValue - stepValue;
+        }
+        if (this.min !== undefined) {
+            const minValue = typeof this.min === 'string' ? Number.parseFloat(this.min) : this.min;
+            newValue = Math.max(newValue, minValue);
+        }
+        if (this.max !== undefined) {
+            const maxValue = typeof this.max === 'string' ? Number.parseFloat(this.max) : this.max;
+            newValue = Math.min(newValue, maxValue);
+        }
+        this.inputRef.current.value = newValue.toString();
+        this.updateFormInternalValue(newValue);
+        input_fc.checkInternalValidity(this, this.inputRef.current);
+        this.handleValueChangeEvent(newValue);
+    }
     /** @internal */
     async getAssociatedFormElement() {
         return this.formInternals.form;
@@ -101,9 +237,10 @@ const NumberInput = class {
     async hasValidValue() {
         const nativeInput = await this.getNativeInputElement();
         if (nativeInput.value === '') {
-            return Promise.resolve(false);
+            return !this.required;
         }
-        return Promise.resolve(this.value !== null && this.value !== undefined && !isNaN(this.value));
+        const parsedValue = this.convertNumberStringToFloat(nativeInput.value);
+        return parsedValue !== undefined;
     }
     /**
      * Returns the native input element used under the hood
@@ -125,39 +262,30 @@ const NumberInput = class {
         return Promise.resolve(this.touched);
     }
     render() {
+        var _a;
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (index.h(index.Host, { key: 'c42e57d87186db97d228a3c80fa487c3e2bbe5d0', class: {
+        return (index.h(index.Host, { key: '4b541dbe6fe2b32b5158eed8f398de300ea71bb4', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, index.h("ix-field-wrapper", { key: '2180bbdb30f50945159b742399297ce011729cf7', id: this.numberInputId, 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: '905329aff61d43248e3ee53cb900e5d611b74999', class: {
+            } }, index.h("ix-field-wrapper", { key: '7ef2bb50ba7c9b3b24612752155a2072329e4b61', id: this.numberInputId, 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: '7e71d63d2a9ecbb16550925e68f3dc8dd76c3968', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, index.h(input_util.SlotStart, { key: '9acae4279a3d0b81e1e863e25875176e5e73cabf', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.InputElement, { key: 'e9e3bdebcd1165efdcb0359a6cd9fd90ecb5d4ef', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', 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(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => {
-                input_util.onInputBlur(this, this.inputRef.current);
-                this.touched = true;
-            } }), index.h(input_util.SlotEnd, { key: 'f9e41241aaff4d70ea46315fd39a908cdfe14e11', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("div", { key: '36507af1b806bd2fc6e4cc1d4d34de9fe8dd8ba0', class: {
+            } }, index.h(input_fc.SlotStart, { key: '8d936c9126f94c42db87b2d95d34ab178eadd31d', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_fc.InputElement, { key: 'c56f510ea8a519204d3d36136d4b0a5a17246370', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.formatValue(this.value), placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => input_fc.checkAllowedKeys(this, event), onKeyDown: (event) => this.handleKeyDown(event), onBeforeInput: (event) => this.handleBeforeInput(event), onPaste: (event) => this.handlePaste(event), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
+                const isScientificNotation = this.isScientificNotation(value.trim());
+                if (!isScientificNotation) {
+                    const parsedValue = this.convertNumberStringToFloat(value);
+                    this.updateFormInternalValue(parsedValue);
+                }
+            }, onBlur: this.handleBlur, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), index.h(input_fc.SlotEnd, { key: '2d7e82c421d51985c9d24c69b6f641279e3e84aa', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("div", { key: '5b1e6f03bf456305386537428b23b3fc2706e411', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, index.h("ix-icon-button", { key: '0bef82df236486f49f71da016edb67e7edbd4775', variant: "subtle-tertiary", icon: index$1.iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => {
-                if (!this.inputRef.current) {
-                    return;
-                }
-                this.inputRef.current.stepDown();
-                input_util.checkInternalValidity(this, this.inputRef.current);
-                this.updateFormInternalValue(Number(this.inputRef.current.value));
-                this.valueChange.emit(this.value);
-            } }), index.h("ix-icon-button", { key: '34f4f8b3dc4e90ec9ada96f15280b39320ed5fb9', variant: "subtle-tertiary", icon: index$1.iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => {
-                if (!this.inputRef.current) {
-                    return;
-                }
-                this.inputRef.current.stepUp();
-                input_util.checkInternalValidity(this, this.inputRef.current);
-                this.updateFormInternalValue(Number(this.inputRef.current.value));
-                this.valueChange.emit(this.value);
-            } })))))));
+            } }, index.h("ix-icon-button", { key: '44a5f583fb174c556a063f384174883ec307f9f4', variant: "subtle-tertiary", icon: index$1.iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => this.handleStepOperation('down') }), index.h("ix-icon-button", { key: 'c007fe5451c3f124e61214160c7ebc8cc1150b25', variant: "subtle-tertiary", icon: index$1.iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueChange"]
+    }; }
 };
 __decorate([
     validation.HookValidationLifecycle()