@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1373-20240705054533

package/components/ix-menu-category.js

@@ -171,7 +171,7 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
         }
     }
     render() {
-        return (h(Host, { key: '681e9563ade090a5f59a8606430fbe74ff4b52de', class: {
+        return (h(Host, { key: '1c9a80de76eb1a08932e4065a5247312c175c44a', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -180,14 +180,14 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: 'ead1226ec1a66cd1ead3dec9eb441217d35f591a', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: 'e55a7ac1bc8b58f74628421fd57b9c058674354d', class: "category" }, h("div", { key: 'b9b5bbabb34aba6573aa53b9fdc6406b63cc2fda', class: "category-text" }, this.label), h("ix-icon", { key: '1589ca98c29d171e4e2989717de92f91f1f51e03', name: 'chevron-down-small', class: {
+            } }, h("ix-menu-item", { key: '4916e3fb2ef1c00ccf6a90366fb8e5ca1c7e4025', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '1a27c0a36105ac449880ea3925e07d55d7a01f83', class: "category" }, h("div", { key: '7aec0b9d401d6167451907cb44a5b643ef07ac4b', class: "category-text" }, this.label), h("ix-icon", { key: '7e638930a4c9219cd7c86a9492ae5c0d336393c3', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: '9e50abc7e68efd6d85433a61e9a5705161ac18f8', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: '609ce8e3554a871899c5c6c2cd2fad40224b59a8', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '5379605872925ea9ed286785a3608e69a6ac2449', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '1299830caade30d34fcfa03522546fe1a4b54296', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -200,7 +200,7 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
                         e.preventDefault();
                     }
                 }
-            } }, h("ix-dropdown-item", { key: '4148ecc61c2cc0654981ac29bc4ef24b405ce726', class: 'category-dropdown-header' }, h("ix-typography", { key: '498b96071905c7db9a536d1b5bde61741db8e87d', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: 'b28dfc32a3c13f311b82d280d9d51cf88ddca175' }), h("slot", { key: '026b92bb6023bafe757f237e492f5d8ad309f57b' }))));
+            } }, h("ix-dropdown-item", { key: '0a2f3039f44c9b545d29aef0ed3600188edbbaf2', class: 'category-dropdown-header' }, h("ix-typography", { key: '841736401537eb57c8446a9e86282d4f5eda900d', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: '5bb1e9beec4f9fca106ccf24266bf16216dba34b' }), h("slot", { key: '8b0c28b1f92c96f93187373e2bef4bfe88156bfe' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxMenuCategoryStyle0; }

package/components/ix-menu-settings-item.js

@@ -19,7 +19,7 @@ const MenuSettingsItem = /*@__PURE__*/ proxyCustomElement(class MenuSettingsItem
         });
     }
     render() {
-        return (h(Host, { key: '3f01e3b01399c947a817adb417eee354fbfcaa1e' }, h("slot", { key: 'a90e71ff69a681442996b4ea342d932f68b42a61' })));
+        return (h(Host, { key: '95940cf98b7f75afe704575f7379d9debf6f0666' }, h("slot", { key: 'd65510239d1f1d0d4dcfc88288fbad819a5ca942' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

package/components/ix-menu.js

@@ -402,44 +402,44 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e7defd239740aa843f696425e1bf6190a88e6e1e', class: {
+        return (h(Host, { key: 'a0107a4aefcea2a7d9f5a907cf3931734d6dd7f8', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("aside", { key: '06cd01136edc2e3361258e3b9d4c3f87e1fa5ae1', class: {
+            }, slot: "menu" }, h("aside", { key: 'fd881d335c4a8d1b2594e838aefa10a06de68064', class: {
                 menu: true,
                 expanded: this.expand,
             }, onClick: () => {
                 this.resetActiveTab();
-            } }, h("div", { key: 'fc10b144e65ab5bec270d2b26baa459684771e34', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: 'dbb35885770c179ca73220582f30c2a086b8cea6', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
-            this.applicationLayoutContext.appSwitchConfig && (h("ix-icon-button", { key: '7aeb35fb2b7ccbdd96e7ae1fdb0321faf597c3a7', onClick: () => showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), h("div", { key: '10125d245ff0c0a643a0772655f07f5ca695486c', id: "menu-tabs", style: {
+            } }, h("div", { key: 'aed59393d3c475579032a9d8e630ecdeaff59a68', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '9d19b6510dc89b2468f9cbc1c126f82f6083ffce', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
+            this.applicationLayoutContext.appSwitchConfig && (h("ix-icon-button", { key: 'd129f2c3aa57dcd8b59e1f3b5304f56d1bdbc002', onClick: () => showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), h("div", { key: 'f33850c76cb8e8cea745c6e084535683f8390f61', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '75d98f79a5c68a33a18c712d3eb0a1ee0323d13f', class: "tabs-shadow-container" }, h("div", { key: 'b80168bc19865f29458869b61861fe548b87ead9', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: 'cfdb221d28845a07893470e16d5fb1e275bb8750', class: "tabs-shadow-container" }, h("div", { key: '050a7c00b9f057644204e9a957ced6bb6628d921', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: '42999103b37d261996352e994a73b85fca1172b8', class: {
+            } }), h("div", { key: 'fb5808e714fff7e8487429db31027a112d04018b', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '9fc2fb36030cbe331114a1ad51d80ae2e2f5aa03', class: "menu-avatar" }, h("slot", { key: '5fd4c7d5f73e016e6be2d30f56852b5c7a5097a3', name: "ix-menu-avatar" })), h("slot", { key: '8a9212742968c99fb71fe5ebc102fb8a0a5a2d69', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '2a2db4c5ba3a820211a7e011a1b9b85509840b4d', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '780791a45a5f995e5b9e03cc9ce909dda00af11d', class: "menu-avatar" }, h("slot", { key: '66b7a9ad9ec85e1d8ff2d849b97b15f13be7bd45', name: "ix-menu-avatar" })), h("slot", { key: 'f4fd7270ab2c876a0f4edff9ea7c4133f21ef42f', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'a32377cefb178304cdde2795df69591b052ed959', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), h("div", { key: '17bdfc3b3fcf103028532e7449e1fcef984cca55', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), h("div", { key: 'c30586a8a9f709592ce56b177d5b2a210cd80b57', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, h("div", { key: 'e5bb42c938621a916d9acc0b9a9c250dff917444', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '32d4dfdc9676e6fe79d6b860cf26e37df95883d5', name: "bottom" })), h("div", { key: 'cfc8c621fbc09946ee3990e4f11ae6cd4064a45c', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, h("div", { key: '166914210ed93da0ff02633a66ae8757894190aa', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '2b9875367a362a28d36a812363ec88c8deda1591', name: "bottom" })), h("div", { key: 'a301ed1f5c1bcaafe972ca74422b9c6c0955668c', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark', label: this.i18nToggleTheme })) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (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), h("div", { key: 'cea5ee338101b0c15273fa853bab20f3d96347e0', class: {
+            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark', label: this.i18nToggleTheme })) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (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), h("div", { key: 'b92b85831072f33e7eb42c24f225d0b9d50a006e', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: 'fddd5046935bd954af9e06984b297ec79ed268f1', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '7a23750be2d0ae1b26dcf183403eb57d4b7856f3', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: 'b2bbadd82da2548e19f2e6e40fa4ecaa3335aa26', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: 'b2a0ff3de07bcb3baf1170f4ee89d0dddcbbc93d', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-message-bar.js

@@ -44,7 +44,7 @@ const MessageBar = /*@__PURE__*/ proxyCustomElement(class MessageBar extends HTM
         this.closedChange.emit();
     }
     render() {
-        return (h(Host, { key: '2e00662ab25672cbb4793193ed877681ffa5cf0c' }, h("div", { key: 'a4302a37f4d8009896ec563eae1088e7dd087544', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '3145307d2db100a3764c562dd5ad0efcb3790402', color: this.color, name: this.icon }), h("div", { key: '07908baa46ff4cbaef761b8557a96fc1fe3bb810', class: "message-content" }, h("slot", { key: '126adbff8050b39a66c1234daac45c15f801089b' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
+        return (h(Host, { key: '89f424843ed559d787f88edd431f1321086cbbb2' }, h("div", { key: '3f450ca115c040e749a0926d896dc2bb7ad3648d', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '73dcaa37d965d84b754cb14e58c3442665fcca07', color: this.color, name: this.icon }), h("div", { key: 'b5d5178e53c550320803ffa2ac4da925db284fc7', class: "message-content" }, h("slot", { key: 'e9d97812edc2c45d0c16f57d29352f5357312720' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
                 this.closeAlert(this.divElement);
             }, "data-testid": "close-btn" })) : (''))));
     }

package/components/ix-modal-example.js

@@ -17,7 +17,7 @@ const ModalExample = /*@__PURE__*/ proxyCustomElement(class ModalExample extends
         closeModal(this.host, 'Done!');
     }
     render() {
-        return (h(Host, { key: '0600377bbd678c44fa5a670ee5a2b9dff7b6b1eb' }, h("div", { key: 'b908e3efc76201ad9c212df14815a44e09095f5c' }, h("div", { key: 'ee7c4e66a7489f8fb3d1bde9eb66730e634cf1db', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '3215dea41b31e7ad7d9fb49129ce39c4d7b8409f', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: '4c05a1afa4cff76d0ab1b3349046eb54bf95e03c', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: 'c8eef09e68fabb73800d725781f3659afb926a0f', class: "modal-footer" }, h("ix-button", { key: '4f7043344527c616c7bff1d4e62d5fff11c73754', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: '42e73f6b8ff1739633615242f38f020d730a6a12', onClick: () => this.close() }, "OK")))));
+        return (h(Host, { key: 'a93b508a6983b97ab3d00fb50c431149a12b1c3a' }, h("div", { key: '0331662e2731d9bbbd5b7cec71d3985e18933ba4' }, h("div", { key: '62fe35ecda14d64395059081baa1ff3751800f13', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '6108daf9af88612fa5f2785a807309c51c8a5983', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: 'ea92bf633a158737f1d4f06b8e68229013f41eb9', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: '6d0e125b9b454d3bc2aa0afa83fa8b7d5b900d3d', class: "modal-footer" }, h("ix-button", { key: 'aa0bb2977686f8118b3eea8217588a20bbe7adb7', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: '77950c33df17b1d9201039fc1431b14fe82361e1', onClick: () => this.close() }, "OK")))));
     }
     get host() { return this; }
 }, [0, "ix-modal-example"]);

package/components/ix-modal-footer.js

@@ -10,7 +10,7 @@ const ModalFooter = /*@__PURE__*/ proxyCustomElement(class ModalFooter extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '105da44cc75507f0e60eb17f9bd6ba19b57a91fc' }, h("slot", { key: '967e261eabc52158a32528570dd7eec22fa552a4' })));
+        return (h(Host, { key: 'ad33c54a40036e5e1905a816957ffdb212bc4587' }, h("slot", { key: 'ad7f526274c316b791b422c7eab0a5efa9a44852' })));
     }
     static get style() { return IxModalFooterStyle0; }
 }, [1, "ix-modal-footer"]);

package/components/ix-modal-loading.js

@@ -11,7 +11,7 @@ const ModalLoading = /*@__PURE__*/ proxyCustomElement(class ModalLoading extends
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'e6a5ed6cf016a30bd76692c5dcc96924cdfebc6d' }, h("ix-spinner", { key: '0979352c75c22f1a97fbad587b2f6648c5fbd867', variant: "primary" }), h("span", { key: '9cc99953a981540e8e2dc9806fd7e481199e1b54', class: 'loading-text' }, h("slot", { key: '89cc3a8cd66fcff80b72fe2d8ed80cb272cf3201' }))));
+        return (h(Host, { key: '8e3c29a9c15b121a2da0acebdf1a00dbe0d18c52' }, h("ix-spinner", { key: 'bc602e7bc4b0264b19be3823e78cc63c7adc39fa', variant: "primary" }), h("span", { key: '69d563df6c6a05ece5723c8c94d24d546831aca4', class: 'loading-text' }, h("slot", { key: 'b369c9d0c257a9c0c11584c72f0696eb969bd13d' }))));
     }
     static get style() { return IxModalLoadingStyle0; }
 }, [1, "ix-modal-loading"]);

package/components/ix-modal.js

@@ -166,17 +166,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '8b2a2348be6f989b1acdbfed6d5801b561379152', class: {
+        return (h(Host, { key: 'e7e27615541ea127c4d9608a71f447f169cde5d3', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, h("div", { key: '677773f563437bfbc6039a41439b861cec214232', class: "dialog-backdrop" }, h("dialog", { key: '80ec0cbc9a3dbb9cfe013ebd6cf68490b5c579ad', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: '3a4e1950295bec70cfdf1a332a9e9e4ab3186472', class: "dialog-backdrop" }, h("dialog", { key: '4455ba17c66dc4d03a792a9aeea11d1380c31674', "aria-modal": 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(), onClick: (event) => this.onModalClick(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, h("slot", { key: '40b25ba86f7404f870664c769f12d7c7b3a8f882' })))));
+            } }, h("slot", { key: '383eae1fa01e4159ca2d512f477532f51c56664a' })))));
     }
     get hostElement() { return this; }
     static get style() { return IxModalStyle0; }

package/components/ix-pagination.js

@@ -1,16 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { B as BaseButton } from './base-button.js';
 import { a as a11yBoolean } from './a11y.js';
-import { d as defineCustomElement$c } from './dropdown.js';
-import { d as defineCustomElement$b } from './dropdown-item.js';
-import { d as defineCustomElement$a } from './field-label.js';
-import { d as defineCustomElement$9 } from './field-wrapper.js';
-import { d as defineCustomElement$8 } from './filter-chip.js';
-import { d as defineCustomElement$7 } from './icon-button.js';
-import { d as defineCustomElement$6 } from './select.js';
-import { d as defineCustomElement$5 } from './select-item.js';
-import { d as defineCustomElement$4 } from './spinner.js';
-import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$9 } from './dropdown.js';
+import { d as defineCustomElement$8 } from './dropdown-item.js';
+import { d as defineCustomElement$7 } from './filter-chip.js';
+import { d as defineCustomElement$6 } from './icon-button.js';
+import { d as defineCustomElement$5 } from './select.js';
+import { d as defineCustomElement$4 } from './select-item.js';
+import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './typography.js';
 
 const paginationCss = ".form-control,.form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.form-control::-moz-placeholder,.form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.form-control::placeholder,.form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:focus-visible{color:var(--theme-input--color)}.form-control[type=number]{text-align:right}.form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.form-control.readonly,.form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only,.form-control[readonly],.form-control[readOnly],.form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only::-moz-placeholder,.form-control[readonly]::-moz-placeholder,.form-control[readOnly]::-moz-placeholder,.form-control.readonly::-moz-placeholder{color:transparent}.form-control:-moz-read-only::placeholder{color:transparent}.form-control:read-only::placeholder,.form-control[readonly]::placeholder,.form-control[readOnly]::placeholder,.form-control.readonly::placeholder{color:transparent}.form-control:disabled,.form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.form-control:disabled::-moz-placeholder,.form-control.disabled::-moz-placeholder{color:transparent}.form-control:disabled::placeholder,.form-control.disabled::placeholder{color:transparent}.form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.form-control{padding:0 0.312rem}textarea.form-control{padding:0.375rem 0.5rem}input.disabled,input:disabled{color:var(--theme-input--color--disabled)}input:-moz-read-only{cursor:default}input:read-only,input.readonly{cursor:default}:host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}:host{}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host,:host .advanced-pagination,:host .item-count{display:inline-flex;align-items:center}:host .basic-pagination{padding:0 0.125rem}:host .advanced-pagination{padding:0 0.75rem}:host .page-selection{width:4.125rem;text-align:center;margin:0 0.5rem;-moz-appearance:textfield;-webkit-appearance:textfield}:host .page-buttons{white-space:nowrap}:host .total-count{white-space:nowrap}:host .item-count{flex-grow:1;justify-content:flex-end;margin-inline-start:1.5rem}:host .item-count ix-select{width:4.5rem;margin-inline-start:1.5rem}:host button{width:auto;min-width:2rem;height:2rem;padding:0 0.5rem}:host button+button{margin-inline-start:0.125rem}";
@@ -133,10 +130,10 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         return h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (h(Host, { key: 'eb3c653903e26f70a13572f269418ae56a05e375' }, h("ix-icon-button", { key: 'a62eb19fbafd0cc39ede3b82a2bc1ca801da27eb', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (h(Host, { key: 'dfb53c78222c3c907d955c9548da14d68b0e94f8' }, h("ix-icon-button", { key: '80935e6cfdff052b4a9280fd0edeed6a2c27e007', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
                 const index = Number.parseInt(e.target['value']);
                 this.selectPage(index - 1);
-            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'ea6b9cd0d23c7eeda8f5aa66bb18157721bf6615', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'd6d17f40ee390398252466da12abecef4952b7ce', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));
@@ -157,7 +154,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ix-pagination", "ix-dropdown", "ix-dropdown-item", "ix-field-label", "ix-field-wrapper", "ix-filter-chip", "ix-icon-button", "ix-select", "ix-select-item", "ix-spinner", "ix-tooltip", "ix-typography"];
+    const components = ["ix-pagination", "ix-dropdown", "ix-dropdown-item", "ix-filter-chip", "ix-icon-button", "ix-select", "ix-select-item", "ix-spinner", "ix-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ix-pagination":
             if (!customElements.get(tagName)) {
@@ -165,51 +162,36 @@ function defineCustomElement$1() {
             }
             break;
         case "ix-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "ix-dropdown-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ix-field-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ix-field-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ix-filter-chip":
+        case "ix-dropdown-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ix-icon-button":
+        case "ix-filter-chip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ix-select":
+        case "ix-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "ix-select-item":
+        case "ix-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "ix-spinner":
+        case "ix-select-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "ix-tooltip":
+        case "ix-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/components/ix-pagination.js.map

@@ -1 +1 @@
-{"file":"ix-pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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@import 'common-variables';\n@import 'legacy/components/forms';\n@import '../icon-button/icon-button';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  &,\n  .advanced-pagination,\n  .item-count {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .basic-pagination {\n    padding: 0 0.125rem;\n  }\n\n  .advanced-pagination {\n    padding: 0 $medium-space;\n  }\n\n  .page-selection {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 $small-space;\n    -moz-appearance: textfield;\n    -webkit-appearance: textfield;\n  }\n\n  .page-buttons {\n    white-space: nowrap;\n  }\n\n  .total-count {\n    white-space: nowrap;\n  }\n\n  .item-count {\n    flex-grow: 1;\n    justify-content: flex-end;\n    margin-inline-start: $large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: $large-space;\n    }\n  }\n\n  button {\n    width: auto;\n    min-width: 2rem;\n    height: 2rem;\n    padding: 0 0.5rem;\n  }\n\n  button + button {\n    margin-inline-start: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 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  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'secondary',\n    outline: false,\n    ghost: true,\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n    extraClasses: {\n      ['w-auto']: true,\n    },\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  private selectPage(index: number) {\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    this.pageSelected.emit(this.selectedPage);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon={'chevron-left-small'}\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography variant=\"default\">{this.i18nPage}</ix-typography>\n            <input\n              class=\"form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index - 1);\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography variant=\"default\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon={'chevron-right-small'}\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            <ix-typography variant=\"default\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              value={`${this.itemCount}`}\n              onValueChange={(e) => {\n                const count = Number.parseInt(\n                  Array.isArray(e.detail) ? e.detail[0] : e.detail\n                );\n\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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@import 'common-variables';\n@import 'legacy/components/forms';\n@import '../icon-button/icon-button';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  &,\n  .advanced-pagination,\n  .item-count {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .basic-pagination {\n    padding: 0 0.125rem;\n  }\n\n  .advanced-pagination {\n    padding: 0 $medium-space;\n  }\n\n  .page-selection {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 $small-space;\n    -moz-appearance: textfield;\n    -webkit-appearance: textfield;\n  }\n\n  .page-buttons {\n    white-space: nowrap;\n  }\n\n  .total-count {\n    white-space: nowrap;\n  }\n\n  .item-count {\n    flex-grow: 1;\n    justify-content: flex-end;\n    margin-inline-start: $large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: $large-space;\n    }\n  }\n\n  button {\n    width: auto;\n    min-width: 2rem;\n    height: 2rem;\n    padding: 0 0.5rem;\n  }\n\n  button + button {\n    margin-inline-start: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 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  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'secondary',\n    outline: false,\n    ghost: true,\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n    extraClasses: {\n      ['w-auto']: true,\n    },\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  private selectPage(index: number) {\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    this.pageSelected.emit(this.selectedPage);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon={'chevron-left-small'}\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography variant=\"default\">{this.i18nPage}</ix-typography>\n            <input\n              class=\"form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index - 1);\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography variant=\"default\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon={'chevron-right-small'}\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            <ix-typography variant=\"default\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              value={`${this.itemCount}`}\n              onValueChange={(e) => {\n                const count = Number.parseInt(\n                  Array.isArray(e.detail) ? e.detail[0] : e.detail\n                );\n\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-pane-layout.js

@@ -226,7 +226,7 @@ const Panes = /*@__PURE__*/ proxyCustomElement(class Panes extends HTMLElement {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: '52ada343d80a6508c1b85de923327cb9c42c9429' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: '8885c647d0661b05b2ed1b58fd8b61614eda6783' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/components/ix-pane.js

@@ -407,7 +407,7 @@ const Pane = /*@__PURE__*/ proxyCustomElement(class Pane extends HTMLElement {
         }
     }
     render() {
-        return (h(Host, { key: '5073e610b9b02ad10f5272b0e42d23f540d9065e', class: {
+        return (h(Host, { key: '10c2543fa3814a44f4a696b768070da6a0b2ce83', class: {
                 'inline-color': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
                 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,
@@ -432,28 +432,28 @@ const Pane = /*@__PURE__*/ proxyCustomElement(class Pane extends HTMLElement {
                 'box-shadow': this.floating,
                 'aria-expanded': this.expanded,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            } }, h("aside", { key: '8a21c58d61d5364309343737bb8bd283b3e25efe', class: {
+            } }, h("aside", { key: '4bea08d18307f21ca3d71874117152c10acd9ce9', class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, h("div", { key: 'd75b5af119dfacbda1db9974e36435f300cb515b', id: "title-div", class: {
+            } }, h("div", { key: 'b86bd206f53643fb15f411528dd9e41e1d060ef8', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, h("ix-icon-button", { key: '31dba3e6d0b6f2a70d9c6446dde96712fe10c5bc', class: "title-icon", size: "24", icon: this.expanded
+            } }, h("ix-icon-button", { key: '4f58db9432c7685521d7a60257fff08118bc3c76', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? 'close'
                     : this.expandIcon
                 : this.minimizeIcon, ghost: true, onClick: () => {
                 this.expanded = !this.expanded;
-            }, "aria-controls": this.composition + 'ToggleButton' }), h("span", { key: 'cab9e83d8ef36a4ef334e4f18b6385f64c8a5ef7', class: {
+            }, "aria-controls": this.composition + 'ToggleButton' }), h("span", { key: 'bd88452cdede62871391416c736ff80ae29f14a0', class: {
                 'title-text': true,
                 rotate: !this.expanded && !this.isMobile && this.isLeftRightPane,
-            } }, this.icon ? (h("ix-icon", { size: "24", name: this.icon })) : null, h("div", { key: '7f4c6daed699ed852da6145253d078637a27cacf', class: "title-text-overflow" }, h("ix-typography", { key: '4486830e173e8625386a0bd6250ecc43856435ec', format: "h4" }, this.heading)))), h("div", { key: 'ac32177babb00ab47027ea28747b96d386887091', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '0e328617b71f534b7e5e23be765a04b541331dc2' })))));
+            } }, this.icon ? (h("ix-icon", { size: "24", name: this.icon })) : null, h("div", { key: '6e49c2b280c258209dd43aa03658ab4bbcb9b883', class: "title-text-overflow" }, h("ix-typography", { key: '65fa43f3fec84b63d24d14b38434eea186aa0910', format: "h4" }, this.heading)))), h("div", { key: '11a5da6825a09b85f4957854179264c43ccd8a6f', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '3c986fb71f77e5481ffd6449445b4247429ff07e' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-pill.js

@@ -25,13 +25,13 @@ const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends HTMLElement {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: 'e90bcb5f8b5282c8c4e34966753c0dbe2186aae7', style: this.variant === 'custom'
+        return (h(Host, { key: '1d4d88d976564778835cd02e28d5ede6fe4dd6f7', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: '8a48a0663c182dbc04390f7da75acb0bc981c52a', style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '74474d69acc5d47b9bf6c5ebe12f676155a9e87d', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -45,10 +45,10 @@ const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends HTMLElement {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '2f836e1dbc4a34ed0b7f38bd35e5179b11bb2745', class: {
+            } }, h("ix-icon", { key: 'c70dcfe5f55c77484cf3300dca53f6a4e55d5caf', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), h("span", { key: 'a46a2412e39970fccad07b91e33bd806c8468eb7', class: "slot-container" }, h("slot", { key: '1dea1448774d06a6a02abdfd4e2a0910d5d1588b' })))));
+            }, name: this.icon, size: '16' }), h("span", { key: 'b3d056721cb891a986ac3196a9fcf049c8b366f9', class: "slot-container" }, h("slot", { key: 'a42505aafc70d545e3ff8020c80f67067b3eac8c' })))));
     }
     get el() { return this; }
     static get style() { return IxPillStyle0; }

package/components/ix-playground-internal.js

@@ -9,7 +9,7 @@ const PlaygroundInternal = /*@__PURE__*/ proxyCustomElement(class PlaygroundInte
         this.__registerHost();
     }
     render() {
-        return h(Host, { key: 'eb29264463dcdb6c3c428fa1724fb1458565bd22' });
+        return h(Host, { key: 'cb88d03e375d222d5903d13ca1fc154d9af86898' });
     }
     static get style() { return IxPlaygroundInternalStyle0; }
 }, [2, "ix-playground-internal"]);

package/components/ix-playground-internal.js.map

@@ -1 +1 @@
-{"file":"ix-playground-internal.js","mappings":";;AAAA,MAAM,aAAa,GAAG,oHAAoH,CAAC;AAC3I,mCAAe,aAAa;;MCkBf,kBAAkB;;;;;IAC7B,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAQ,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/playground/playground.scss?tag=ix-playground-internal&encapsulation=scoped","src/components/playground/playground.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@import 'common-variables';\n\n:host {\n  display: block;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n  padding: 0rem 0rem 0rem 0rem;\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 * LICENxSE file in the root directory of this source tree.\n */\n\nimport { Component, Host, h } from '@stencil/core';\n\n/** @internal */\n@Component({\n  tag: 'ix-playground-internal',\n  styleUrl: 'playground.scss',\n  // shadow: true,\n  // Set scoped=true and shadow=false to test global styles like checkbox etc\n  scoped: true,\n})\nexport class PlaygroundInternal {\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}
+{"file":"ix-playground-internal.js","mappings":";;AAAA,MAAM,aAAa,GAAG,oHAAoH,CAAC;AAC3I,mCAAe,aAAa;;MCkBf,kBAAkB;;;;;IAC7B,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAQ,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/playground/playground.scss?tag=ix-playground-internal&encapsulation=scoped","src/components/playground/playground.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@import 'common-variables';\n\n:host {\n  display: block;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n  padding: 0rem 0rem 0rem 0rem;\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 * LICENxSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/** @internal */\n@Component({\n  tag: 'ix-playground-internal',\n  styleUrl: 'playground.scss',\n  // shadow: true,\n  // Set scoped=true and shadow=false to test global styles like checkbox etc\n  scoped: true,\n})\nexport class PlaygroundInternal {\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/components/ix-push-card.js

@@ -25,7 +25,7 @@ const PushCard = /*@__PURE__*/ proxyCustomElement(class PushCard extends HTMLEle
         const color = this.variant === 'insight' || this.variant === 'notification'
             ? 'std'
             : undefined;
-        return (h(Host, { key: '5cbbe82bacf6308a4b9e2e47bd9762d6e00e6435' }, h("ix-card", { key: 'eed0917416a3df594d032e93564ad98ecdd2c430', variant: this.variant }, h("ix-card-content", { key: '5bd5debadab1a175cff75e5cac50c1827872445a' }, h("ix-card-title", { key: 'ea9233a09f2a6568c104e3ca2c0f538407808683' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: 'c5b21e53053c76bdf241ea8b929c4227dbbf0c57', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '4c5d98eb1d95486e40fb7729e98235f1db7ca8c2', name: "title-action" })), h("ix-typography", { key: '97c086c6df921dcbdb0606c43f3caf37a259d929', color: color, format: "h4" }, this.heading), h("ix-typography", { key: 'b66a7da08fee444989e9ed09d51c96f9d7109c2c', color: color }, this.subheading)), h("ix-card-accordion", { key: '9fc01f84c8d31716398cb628bec2b3a330fe1d0d', collapse: this.collapse }, h("slot", { key: 'a3787c21bf77731cfc20c3cdf675f3322b84dd9d' })))));
+        return (h(Host, { key: '9ba9fd8e6cc9f2b74e89fbbcd0c09a04aca45ac2' }, h("ix-card", { key: '913618b3fc69c1e59c3bbeb4c92569b2754ff3ae', variant: this.variant }, h("ix-card-content", { key: 'bb75a940ce3ac891fe947f4ed9e542c36a492f92' }, h("ix-card-title", { key: '37f4faab2368f341dd835fffe64b5915e1c4b322' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: '42059a2ed174f15fdcce1ddb599bc831afade5b1', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '9e3b8df6148f3b8e3d577d8ece5253b14c85a0dd', name: "title-action" })), h("ix-typography", { key: 'b7473e9fd9fdaee3045ec4884544469a9a6457fe', color: color, format: "h4" }, this.heading), h("ix-typography", { key: '26c212e7f6111df4d353525fda6b3a76ee7dea3c', color: color }, this.subheading)), h("ix-card-accordion", { key: 'a779591ee7405f4a725f1c04abbc7223064ee885', collapse: this.collapse }, h("slot", { key: '5d42faa67c254a1d8541c525cb8e0e08e6b0d095' })))));
     }
     static get style() { return IxPushCardStyle0; }
 }, [1, "ix-push-card", {