npm - @siemens/ix - Versions diffs - 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522 - Mend

@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1382) hide show

package/components/ix-blind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-blind.js","mappings":"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","names":[],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.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@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'insight') {\n :host(.blind-#{$variant}) {\n @if $variant == 'outline' {\n border: solid\n var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n }\n\n .blind-header {\n @if $variant == 'outline' {\n background-color: var(--theme-color-ghost);\n } @else {\n background-color: var(--theme-color-#{$variant});\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n @include ghost-hover-pressed;\n } @else {\n @include hover {\n background-color: var(--theme-color-#{$variant}--hover);\n }\n\n @include active {\n background-color: var(--theme-color-#{$variant}--active);\n }\n }\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n .blind-header-title-label {\n color: var(--theme-color-std-text);\n }\n .blind-header-title-sublabel {\n color: var(--theme-color-soft-text);\n }\n } @else {\n .blind-header-title-label,\n .blind-header-title-sublabel {\n color: var(--theme-color-#{$variant}--contrast);\n }\n }\n\n @if $variant == 'outline' {\n border-color: var(--theme-color-soft-bdr);\n } @else {\n background-color: var(--theme-blind-base--background);\n }\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header-wrapper {\n position: relative;\n min-height: 3rem;\n height: 3rem;\n overflow: hidden;\n }\n\n .blind-header-content {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n\n width: 100%;\n height: 100%;\n\n pointer-events: none;\n padding-left: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n position: relative;\n align-items: center;\n flex-grow: 1;\n margin-right: 0.5rem;\n }\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: block;\n position: absolute;\n\n top: 0px;\n left: 0px;\n\n pointer-events: all;\n\n padding-left: 2.5rem;\n min-height: 3rem;\n height: 3rem;\n width: calc(100% - 2 var(--theme-blind--border-thickness));\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n cursor: pointer;\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n }\n\n .blind-header-title-icon,\n .collapse-icon {\n margin-right: $small-space;\n }\n\n .blind-header-title-row {\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .blind-header-title-col {\n display: inline-flex;\n align-items: center;\n width: calc(100% - 1rem);\n overflow: hidden;\n }\n\n .blind-header-title-col:not(:first-of-type) {\n justify-content: flex-end;\n }\n ix-typography {\n flex-grow: 1;\n @include ellipsis;\n }\n\n .blind-header-title-label {\n @include ellipsis;\n padding-inline-end: 0.5rem;\n }\n\n .blind-header-title-sublabel {\n @include ellipsis;\n padding-inline: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n min-width: 0;\n }\n\n .blind-header-labels {\n display: inline-flex;\n flex-grow: 1;\n min-width: 0;\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: var(--theme-default-time);\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n\n .header-actions {\n pointer-events: all;\n margin-left: auto;\n }\n}\n\n$blind-variants: (\n alarm,\n critical,\n info,\n insight,\n neutral,\n notification,\n success,\n warning,\n primary,\n outline\n);\n\n@each $variant in $blind-variants {\n @include blind($variant);\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 Fragment,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant \| 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'insight';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host\n class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={'chevron-right-small'}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-blind.js","mappings":"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","names":[],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.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@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'insight') {\n :host(.blind-#{$variant}) {\n @if $variant == 'outline' {\n border: solid\n var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n }\n\n .blind-header {\n @if $variant == 'outline' {\n background-color: var(--theme-color-ghost);\n } @else {\n background-color: var(--theme-color-#{$variant});\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n @include ghost-hover-pressed;\n } @else {\n @include hover {\n background-color: var(--theme-color-#{$variant}--hover);\n }\n\n @include active {\n background-color: var(--theme-color-#{$variant}--active);\n }\n }\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n .blind-header-title-label {\n color: var(--theme-color-std-text);\n }\n .blind-header-title-sublabel {\n color: var(--theme-color-soft-text);\n }\n } @else {\n .blind-header-title-label,\n .blind-header-title-sublabel {\n color: var(--theme-color-#{$variant}--contrast);\n }\n }\n\n @if $variant == 'outline' {\n border-color: var(--theme-color-soft-bdr);\n } @else {\n background-color: var(--theme-blind-base--background);\n }\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header-wrapper {\n position: relative;\n min-height: 3rem;\n height: 3rem;\n overflow: hidden;\n }\n\n .blind-header-content {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n\n width: 100%;\n height: 100%;\n\n pointer-events: none;\n padding-left: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n position: relative;\n align-items: center;\n flex-grow: 1;\n margin-right: 0.5rem;\n }\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: block;\n position: absolute;\n\n top: 0px;\n left: 0px;\n\n pointer-events: all;\n\n padding-left: 2.5rem;\n min-height: 3rem;\n height: 3rem;\n width: calc(100% - 2 var(--theme-blind--border-thickness));\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n cursor: pointer;\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n }\n\n .blind-header-title-icon,\n .collapse-icon {\n margin-right: $small-space;\n }\n\n .blind-header-title-row {\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .blind-header-title-col {\n display: inline-flex;\n align-items: center;\n width: calc(100% - 1rem);\n overflow: hidden;\n }\n\n .blind-header-title-col:not(:first-of-type) {\n justify-content: flex-end;\n }\n ix-typography {\n flex-grow: 1;\n @include ellipsis;\n }\n\n .blind-header-title-label {\n @include ellipsis;\n padding-inline-end: 0.5rem;\n }\n\n .blind-header-title-sublabel {\n @include ellipsis;\n padding-inline: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n min-width: 0;\n }\n\n .blind-header-labels {\n display: inline-flex;\n flex-grow: 1;\n min-width: 0;\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: var(--theme-default-time);\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n\n .header-actions {\n pointer-events: all;\n margin-left: auto;\n }\n}\n\n$blind-variants: (\n alarm,\n critical,\n info,\n insight,\n neutral,\n notification,\n success,\n warning,\n primary,\n outline\n);\n\n@each $variant in $blind-variants {\n @include blind($variant);\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 Fragment,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant \| 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'insight';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host\n class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={'chevron-right-small'}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-breadcrumb.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './dropdown.js';
 import { d as defineCustomElement$3 } from './dropdown-item.js';
 import { d as defineCustomElement$2 } from './spinner.js';
-const breadcrumbCss = ":host{display:flex;justify-content:flex-start;height:2.5rem;align-items:center;background-color:transparent;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .previous-button{width:3rem;min-width:0px}:host .crumb-dropdown{overflow:visible}:host .remove-anchor::after{display:none}:host .more-text{display:flex}:host .more-text .more-text-ellipsis{width:1rem;display:inline-block;font-weight:700}:host .more-text ix-icon{padding-top:2px}:host nav,:host ol,:host .crumb-items{display:contents}";
+const breadcrumbCss = ":host{display:flex;justify-content:flex-start;height:2.5rem;align-items:center;background-color:transparent;overflow:hidden}: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 .previous-button{width:3rem;min-width:0px}:host .crumb-dropdown{overflow:visible}:host .remove-anchor::after{display:none}:host .more-text{display:flex}:host .more-text .more-text-ellipsis{width:1rem;display:inline-block;font-weight:700}:host .more-text ix-icon{padding-top:2px}:host nav,:host ol,:host .crumb-items{display:contents}";
 const IxBreadcrumbStyle0 = breadcrumbCss;
 let sequenceId = 0;
@@ -74,7 +74,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: '2aaaac4e884816c159025205021fa3ae168b2f81' }, h("ix-dropdown", { key: 'd532d910af7b09ab13becd697619aa925366ae49', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (h(Host, { key: '88564e42848afe9cd686ce212f45e0c42c130004' }, h("ix-dropdown", { key: 'e8e14815157a506130c96700c67b0a6dca823fe2', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef
                 : null, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
@@ -91,7 +91,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
             return (h("ix-dropdown-item", { label: label, onClick: () => {
                     this.onItemClick(label);
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: '399d6dcf91ecd9cb5cd7fd9797f28431ef262f78', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'ee7f6ebf18d7c1a699886b704841ccdc7bd4e787' }, h("slot", { key: '7f12ae63b997b9a350ba00b96c85e870a9520d1b' }))), h("ix-dropdown", { key: 'e90bf4b2aedd117179f4a3298f22f49196bd4c62', trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: '043028f06980967ebb599cb823eb7c2073d3af5a', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '7d8f489c5244be0f70602b6078d29f7581194a69' }, h("slot", { key: 'a2b8a891c1232e6ac47fb45ac109c1cd70e523fc' }))), h("ix-dropdown", { key: 'f9006cf33c009843f968be24bf3e6354faf64207', trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,

package/components/ix-breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-breadcrumb.js","mappings":"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","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.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@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n justify-content: flex-start;\n height: 2.5rem;\n align-items: center;\n background-color: transparent;\n overflow: hidden;\n\n .previous-button {\n width: 3rem;\n min-width: 0px;\n }\n\n .crumb-dropdown {\n overflow: visible;\n }\n\n .remove-anchor::after {\n display: none;\n }\n\n .more-text {\n display: flex;\n\n .more-text-ellipsis {\n width: 1rem;\n display: inline-block;\n font-weight: $font-weight-bold;\n }\n\n ix-icon {\n // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n // using padding-top to achieve same position as before\n padding-top: 2px;\n }\n }\n\n nav,\n ol,\n .crumb-items {\n display: contents;\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 Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n tag: 'ix-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true,\n})\nexport class Breadcrumb {\n @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n /\n Excess items will get hidden inside of dropdown\n /\n @Prop() visibleItemCount = 9;\n\n /\n Items will be accessible through a dropdown\n /\n @Prop() nextItems: string[] = [];\n @Watch('nextItems')\n onNextItemsChange() {\n this.onChildMutation();\n }\n\n /\n Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n /\n @Prop() ghost = true;\n\n /\n Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n * with conditionally hidden previous items\n \n @since 2.0.0\n /\n @Prop() ariaLabelPreviousButton = 'previous';\n\n /\n Crumb item clicked event\n /\n @Event() itemClick: EventEmitter<string>;\n\n /\n Next item clicked event\n */\n @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n @State() previousButtonRef: HTMLElement;\n @State() nextButtonRef: HTMLElement;\n @State() items: HTMLIxBreadcrumbItemElement[] = [];\n @State() isPreviousDropdownExpanded = false;\n\n private mutationObserver: MutationObserver;\n\n private previousButtonId = createId();\n private previousDropdownId = createId();\n\n private onItemClick(item: string) {\n this.itemClick.emit(item);\n }\n\n componentDidLoad() {\n this.mutationObserver = createMutationObserver(() =>\n this.onChildMutation()\n );\n\n this.mutationObserver.observe(this.hostElement, {\n subtree: true,\n childList: true,\n });\n }\n\n componentWillLoad() {\n this.onChildMutation();\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n private async onChildMutation() {\n const updatedItems = this.getItems();\n\n updatedItems.forEach((bc, index) => {\n const shouldShowDropdown =\n this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n bc.ghost = this.ghost;\n bc.showChevron = updatedItems.length - 1 !== index \|\| shouldShowDropdown;\n bc.isDropdownTrigger = shouldShowDropdown;\n\n if (shouldShowDropdown) {\n this.nextButtonRef = bc;\n }\n\n if (updatedItems.length < this.visibleItemCount) {\n return;\n }\n\n bc.visible = index >= updatedItems.length - this.visibleItemCount;\n });\n\n this.items = updatedItems;\n }\n\n private getItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n }\n\n render() {\n const a11y = a11yHostAttributes(this.hostElement);\n return (\n <Host>\n <ix-dropdown\n id={this.previousDropdownId}\n aria-label={this.ariaLabelPreviousButton}\n trigger={\n this.items?.length > this.visibleItemCount\n ? this.previousButtonRef\n : null\n }\n onShowChanged={({ detail }) => {\n this.isPreviousDropdownExpanded = detail;\n\n const previousButton = this.hostElement.shadowRoot.getElementById(\n this.previousButtonId\n );\n\n // Need to force update previous button to change `aria-expanded`\n if (previousButton) {\n forceUpdate(\n this.hostElement.shadowRoot.getElementById(\n this.previousButtonId\n )\n );\n }\n }}\n >\n {this.items\n .slice(0, this.items.length - this.visibleItemCount)\n .map((item) => {\n const label = item.label ?? item.innerText;\n\n return (\n <ix-dropdown-item\n label={label}\n onClick={() => {\n this.onItemClick(label);\n }}\n onItemClick={(event) => event.stopPropagation()}\n ></ix-dropdown-item>\n );\n })}\n </ix-dropdown>\n {this.items?.length > this.visibleItemCount ? (\n <ix-breadcrumb-item\n id={this.previousButtonId}\n ref={(ref) => (this.previousButtonRef = ref)}\n label=\"...\"\n tabIndex={1}\n onItemClick={(event) => event.stopPropagation()}\n aria-describedby={this.previousDropdownId}\n aria-controls={this.previousDropdownId}\n aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n class={'previous-button'}\n ></ix-breadcrumb-item>\n ) : null}\n <nav\n class=\"crumb-items\"\n aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n >\n <ol>\n <slot></slot>\n </ol>\n </nav>\n <ix-dropdown trigger={this.nextButtonRef}>\n {this.nextItems?.map((item) => (\n <ix-dropdown-item\n label={item}\n onClick={(e) => {\n this.nextClick.emit({\n event: e,\n item,\n });\n }}\n onItemClick={(event) => event.stopPropagation()}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-breadcrumb.js","mappings":"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","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.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@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n justify-content: flex-start;\n height: 2.5rem;\n align-items: center;\n background-color: transparent;\n overflow: hidden;\n\n .previous-button {\n width: 3rem;\n min-width: 0px;\n }\n\n .crumb-dropdown {\n overflow: visible;\n }\n\n .remove-anchor::after {\n display: none;\n }\n\n .more-text {\n display: flex;\n\n .more-text-ellipsis {\n width: 1rem;\n display: inline-block;\n font-weight: $font-weight-bold;\n }\n\n ix-icon {\n // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n // using padding-top to achieve same position as before\n padding-top: 2px;\n }\n }\n\n nav,\n ol,\n .crumb-items {\n display: contents;\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 Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n tag: 'ix-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true,\n})\nexport class Breadcrumb {\n @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n /\n Excess items will get hidden inside of dropdown\n /\n @Prop() visibleItemCount = 9;\n\n /\n Items will be accessible through a dropdown\n /\n @Prop() nextItems: string[] = [];\n @Watch('nextItems')\n onNextItemsChange() {\n this.onChildMutation();\n }\n\n /\n Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n /\n @Prop() ghost = true;\n\n /\n Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n * with conditionally hidden previous items\n \n @since 2.0.0\n /\n @Prop() ariaLabelPreviousButton = 'previous';\n\n /\n Crumb item clicked event\n /\n @Event() itemClick: EventEmitter<string>;\n\n /\n Next item clicked event\n */\n @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n @State() previousButtonRef: HTMLElement;\n @State() nextButtonRef: HTMLElement;\n @State() items: HTMLIxBreadcrumbItemElement[] = [];\n @State() isPreviousDropdownExpanded = false;\n\n private mutationObserver: MutationObserver;\n\n private previousButtonId = createId();\n private previousDropdownId = createId();\n\n private onItemClick(item: string) {\n this.itemClick.emit(item);\n }\n\n componentDidLoad() {\n this.mutationObserver = createMutationObserver(() =>\n this.onChildMutation()\n );\n\n this.mutationObserver.observe(this.hostElement, {\n subtree: true,\n childList: true,\n });\n }\n\n componentWillLoad() {\n this.onChildMutation();\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n private async onChildMutation() {\n const updatedItems = this.getItems();\n\n updatedItems.forEach((bc, index) => {\n const shouldShowDropdown =\n this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n bc.ghost = this.ghost;\n bc.showChevron = updatedItems.length - 1 !== index \|\| shouldShowDropdown;\n bc.isDropdownTrigger = shouldShowDropdown;\n\n if (shouldShowDropdown) {\n this.nextButtonRef = bc;\n }\n\n if (updatedItems.length < this.visibleItemCount) {\n return;\n }\n\n bc.visible = index >= updatedItems.length - this.visibleItemCount;\n });\n\n this.items = updatedItems;\n }\n\n private getItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n }\n\n render() {\n const a11y = a11yHostAttributes(this.hostElement);\n return (\n <Host>\n <ix-dropdown\n id={this.previousDropdownId}\n aria-label={this.ariaLabelPreviousButton}\n trigger={\n this.items?.length > this.visibleItemCount\n ? this.previousButtonRef\n : null\n }\n onShowChanged={({ detail }) => {\n this.isPreviousDropdownExpanded = detail;\n\n const previousButton = this.hostElement.shadowRoot.getElementById(\n this.previousButtonId\n );\n\n // Need to force update previous button to change `aria-expanded`\n if (previousButton) {\n forceUpdate(\n this.hostElement.shadowRoot.getElementById(\n this.previousButtonId\n )\n );\n }\n }}\n >\n {this.items\n .slice(0, this.items.length - this.visibleItemCount)\n .map((item) => {\n const label = item.label ?? item.innerText;\n\n return (\n <ix-dropdown-item\n label={label}\n onClick={() => {\n this.onItemClick(label);\n }}\n onItemClick={(event) => event.stopPropagation()}\n ></ix-dropdown-item>\n );\n })}\n </ix-dropdown>\n {this.items?.length > this.visibleItemCount ? (\n <ix-breadcrumb-item\n id={this.previousButtonId}\n ref={(ref) => (this.previousButtonRef = ref)}\n label=\"...\"\n tabIndex={1}\n onItemClick={(event) => event.stopPropagation()}\n aria-describedby={this.previousDropdownId}\n aria-controls={this.previousDropdownId}\n aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n class={'previous-button'}\n ></ix-breadcrumb-item>\n ) : null}\n <nav\n class=\"crumb-items\"\n aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n >\n <ol>\n <slot></slot>\n </ol>\n </nav>\n <ix-dropdown trigger={this.nextButtonRef}>\n {this.nextItems?.map((item) => (\n <ix-dropdown-item\n label={item}\n onClick={(e) => {\n this.nextClick.emit({\n event: e,\n item,\n });\n }}\n onItemClick={(event) => event.stopPropagation()}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-card-list.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './icon-button.js';
 import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './typography.js';
-const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
+const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}: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 .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
 const IxCardListStyle0 = cardListCss;
 function CardListTitle(props) {
@@ -146,16 +146,16 @@ const CardList = /*@__PURE__*/ proxyCustomElement(class CardList extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: 'c52ee605d2f81a82788543defb031d99a7629eca' }, h(CardListTitle, { key: '976f9943a705914b148bec2cfbf90d44a63905c3', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: 'ada39cb89614cd0cad3347eedf2be1e5c41feff1' }, h(CardListTitle, { key: 'd6f36fae6be5f42dad90cf857ce0299f815884ca', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: 'cbf01e7d4cc781ccf3458fcb4e0a3c70e4cea062', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '3cd90edbe2b68d1af6cf513dda3d421e4e8726bd', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '025b916a7b4b979303122302cf33a593ecfca968', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '204fb870de26ad28183bfec6d46e1156c2f05727', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: 'bf626a7477a10cc184eeec082ed4f357be37d4b0', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '8bd77dd2e09e6cdac4fa773786f6d811305b8209', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,

package/components/ix-card-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-card-list.js","mappings":"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","names":[],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n margin: 0.5rem;\n\n .CardList_Title {\n display: flex;\n position: relative;\n height: $CardList__Title__Height;\n align-items: center;\n width: 100%;\n margin-bottom: 0.5rem;\n }\n\n .CardList__Title__Button {\n margin-right: 1rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .CardList__Title__Button__Collapsed {\n transform: rotate(-90deg);\n }\n\n .CardList__Title__Show__All {\n align-self: center;\n margin-left: auto;\n margin-right: 0px;\n }\n\n .CardList__Content {\n display: flex;\n position: relative;\n height: calc(100% - #{$CardList__Title__Height});\n width: 100%;\n gap: 1.5rem;\n transition: var(--theme-default-time) ease-in-out;\n overflow: auto;\n }\n\n .CardList__Content__Collapsed {\n min-height: 0px;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n }\n\n .CardList__Style__Flexbox__Scroll {\n flex-wrap: wrap;\n }\n\n .CardList__Style__Infinite__Scroll {\n flex-wrap: nowrap;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .CardList__Overflow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n mask-image: var(--ix-card-list-overflow, none);\n }\n\n .Show__All__Card {\n display: flex;\n position: relative;\n\n align-self: flex-start;\n justify-self: center;\n\n max-width: 11.25rem;\n min-width: 11.25rem;\n width: 11.25rem;\n\n min-height: 11.25rem;\n max-height: 11.25rem;\n height: 11.25rem;\n\n --ix-card-border-color: var(--theme-color-primary);\n color: var(--theme-color-primary);\n }\n\n .CardList__Style__Infinite__Scroll .Show__All__Card {\n margin-top: 2.375rem;\n }\n\n .CardList__Style__Flexbox__Scroll .Show__All__Card {\n margin-bottom: 2.375rem;\n }\n\n .Show__All__Card:hover {\n background-color: var(--theme-color-ghost--hover);\n }\n\n .Show__All__Card:active {\n background-color: var(--theme-color-ghost--active);\n }\n\n .Show__All__Card__Content {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .Show__All__Card__Icon {\n display: flex;\n position: absolute;\n height: 4rem;\n width: 4rem;\n justify-content: center;\n align-items: center;\n }\n\n .Show__All__Card__Text {\n margin-bottom: 0px;\n margin-top: auto;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n label: string;\n isCollapsed: boolean;\n onClick: (e: MouseEvent) => void;\n onShowAllClick: (e: MouseEvent) => void;\n showAllLabel: string;\n showAllCounter: number;\n hideShowAll: boolean;\n}) {\n if (props.label === '') {\n return null;\n }\n\n return (\n <div class=\"CardList_Title\">\n <ix-icon-button\n ghost\n icon={'chevron-down'}\n onClick={props.onClick}\n color=\"color-primary\"\n class={{\n CardList__Title__Button: true,\n CardList__Title__Button__Collapsed: props.isCollapsed,\n }}\n ></ix-icon-button>\n <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n {!props.hideShowAll && (\n <ix-button\n class=\"CardList__Title__Show__All\"\n ghost\n onClick={props.onShowAllClick}\n >\n <span>{props.showAllLabel}</span>\n <span>\n {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n </span>\n </ix-button>\n )}\n </div>\n );\n}\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-card-list',\n styleUrl: 'card-list.scss',\n shadow: true,\n})\nexport class CardList {\n /\n Name the card list\n /\n @Prop() label: string;\n\n /\n Collapse the list\n /\n @Prop({ mutable: true }) collapse = false;\n\n /\n List style\n /\n @Prop() listStyle: 'stack' \| 'scroll' = 'stack';\n\n /\n Maximal visible cards\n \n @internal\n /\n @Prop() maxVisibleCards = 12;\n\n /\n Overwrite the default show all count.\n * /\n @Prop() showAllCount: number \| undefined;\n\n /\n Suppress the overflow handling of child elements\n /\n @Prop() suppressOverflowHandling = false;\n\n /\n Hide the show all button\n \n @since 2.2.0\n /\n @Prop() hideShowAll = false;\n\n /\n i18n Show all button\n /\n @Prop() i18nShowAll = 'Show all';\n\n /\n i18n More cards available\n /\n @Prop() i18nMoreCards = 'There are more cards available';\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() collapseChanged: EventEmitter<boolean>;\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() showAllClick: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n /\n Fire event when the show more card is clicked.\n /\n @Event() showMoreCardClick: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n @Element() hostElement: HTMLIxCardListElement;\n\n @State() private hasOverflowingElements = false;\n @State() private numberOfOverflowingElements = 0;\n @State() private numberOfAllChildElements = 0;\n @State() private leftScrollDistance = 0;\n @State() private rightScrollDistance = 0;\n\n private observer: MutationObserver;\n\n private onCardListVisibilityToggle() {\n this.collapse = !this.collapse;\n this.collapseChanged.emit(this.collapse);\n }\n\n private onShowAllClick(event: MouseEvent) {\n this.showAllClick.emit({\n nativeEvent: event,\n });\n }\n\n private getListChildren() {\n const slot = this.hostElement.shadowRoot.querySelector(\n '.CardList__Content > slot'\n ) as HTMLSlotElement;\n return slot.assignedElements({ flatten: true });\n }\n\n private changeVisibilityOfSlotChildren() {\n const childElements = this.getListChildren();\n childElements.forEach((element, index) => {\n if (element instanceof HTMLElement) {\n if (index > this.maxVisibleCards - 1) {\n element.classList.add('d-none');\n return;\n }\n element.classList.remove('d-none');\n }\n });\n this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n this.numberOfOverflowingElements =\n childElements.length - this.maxVisibleCards;\n\n this.numberOfAllChildElements = childElements.length;\n this.detectOverflow();\n }\n\n private registerOverflowHandler() {\n this.observer = createMutationObserver(() => {\n this.changeVisibilityOfSlotChildren();\n });\n\n this.observer.observe(\n this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n {\n childList: true,\n subtree: true,\n }\n );\n\n requestAnimationFrame(() => {\n this.changeVisibilityOfSlotChildren();\n });\n }\n\n private shouldHandleOverflow() {\n if (this.suppressOverflowHandling) {\n return false;\n }\n if (this.listStyle === 'stack' \|\| this.listStyle === 'scroll') {\n return true;\n }\n }\n\n private get listElement() {\n return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n }\n\n private onCardListScroll() {\n this.detectOverflow();\n }\n\n private isShowMoreCardVisible() {\n return (\n this.suppressOverflowHandling === false && this.hasOverflowingElements\n );\n }\n\n private getOpacityFromScrollDistance(distance: number) {\n if (!this.listElement) {\n return 0;\n }\n\n if (distance === 0) {\n return 0;\n }\n\n if (distance > 100) {\n return 1;\n }\n\n return distance / 100;\n }\n\n private computeMaskLayer() {\n const maxOverflowWidth = 80;\n const maskLayer = `linear-gradient(\n 90deg,\n transparent 0px,\n black ${\n maxOverflowWidth \n (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n }px,\n black calc(100% - ${\n maxOverflowWidth *\n (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n ? 1\n : 0)\n }px),\n transparent 100%\n )`;\n return {\n '--ix-card-list-overflow': maskLayer,\n };\n }\n\n @Listen('resize', { target: 'window' })\n private detectOverflow() {\n const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n this.leftScrollDistance = scrollLeft;\n this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n }\n\n componentDidLoad() {\n if (this.shouldHandleOverflow()) {\n this.registerOverflowHandler();\n }\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <CardListTitle\n isCollapsed={this.collapse}\n label={this.label}\n showAllLabel={this.i18nShowAll}\n showAllCounter={\n this.showAllCount === undefined\n ? this.numberOfAllChildElements\n : this.showAllCount\n }\n onClick={() => this.onCardListVisibilityToggle()}\n onShowAllClick={(e) => this.onShowAllClick(e)}\n hideShowAll={this.hideShowAll}\n ></CardListTitle>\n <div\n class={{\n CardList__Overflow: true,\n }}\n style={this.computeMaskLayer()}\n >\n <div\n class={{\n CardList__Content: true,\n CardList__Content__Collapsed: this.collapse,\n CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n }}\n onScroll={() => this.onCardListScroll()}\n >\n <slot\n onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n ></slot>\n {this.isShowMoreCardVisible() ? (\n <ix-card\n class={{\n Show__All__Card: true,\n }}\n onClick={(event) =>\n this.showMoreCardClick.emit({\n nativeEvent: event,\n })\n }\n >\n <ix-card-content class=\"Show__All__Card__Content\">\n <ix-icon\n name={'more-menu'}\n size={'32'}\n class={'Show__All__Card__Icon'}\n ></ix-icon>\n <span class=\"Show__All__Card__Text\">\n {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n </span>\n </ix-card-content>\n </ix-card>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-card-list.js","mappings":"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","names":[],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n margin: 0.5rem;\n\n .CardList_Title {\n display: flex;\n position: relative;\n height: $CardList__Title__Height;\n align-items: center;\n width: 100%;\n margin-bottom: 0.5rem;\n }\n\n .CardList__Title__Button {\n margin-right: 1rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .CardList__Title__Button__Collapsed {\n transform: rotate(-90deg);\n }\n\n .CardList__Title__Show__All {\n align-self: center;\n margin-left: auto;\n margin-right: 0px;\n }\n\n .CardList__Content {\n display: flex;\n position: relative;\n height: calc(100% - #{$CardList__Title__Height});\n width: 100%;\n gap: 1.5rem;\n transition: var(--theme-default-time) ease-in-out;\n overflow: auto;\n }\n\n .CardList__Content__Collapsed {\n min-height: 0px;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n }\n\n .CardList__Style__Flexbox__Scroll {\n flex-wrap: wrap;\n }\n\n .CardList__Style__Infinite__Scroll {\n flex-wrap: nowrap;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .CardList__Overflow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n mask-image: var(--ix-card-list-overflow, none);\n }\n\n .Show__All__Card {\n display: flex;\n position: relative;\n\n align-self: flex-start;\n justify-self: center;\n\n max-width: 11.25rem;\n min-width: 11.25rem;\n width: 11.25rem;\n\n min-height: 11.25rem;\n max-height: 11.25rem;\n height: 11.25rem;\n\n --ix-card-border-color: var(--theme-color-primary);\n color: var(--theme-color-primary);\n }\n\n .CardList__Style__Infinite__Scroll .Show__All__Card {\n margin-top: 2.375rem;\n }\n\n .CardList__Style__Flexbox__Scroll .Show__All__Card {\n margin-bottom: 2.375rem;\n }\n\n .Show__All__Card:hover {\n background-color: var(--theme-color-ghost--hover);\n }\n\n .Show__All__Card:active {\n background-color: var(--theme-color-ghost--active);\n }\n\n .Show__All__Card__Content {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .Show__All__Card__Icon {\n display: flex;\n position: absolute;\n height: 4rem;\n width: 4rem;\n justify-content: center;\n align-items: center;\n }\n\n .Show__All__Card__Text {\n margin-bottom: 0px;\n margin-top: auto;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n label: string;\n isCollapsed: boolean;\n onClick: (e: MouseEvent) => void;\n onShowAllClick: (e: MouseEvent) => void;\n showAllLabel: string;\n showAllCounter: number;\n hideShowAll: boolean;\n}) {\n if (props.label === '') {\n return null;\n }\n\n return (\n <div class=\"CardList_Title\">\n <ix-icon-button\n ghost\n icon={'chevron-down'}\n onClick={props.onClick}\n color=\"color-primary\"\n class={{\n CardList__Title__Button: true,\n CardList__Title__Button__Collapsed: props.isCollapsed,\n }}\n ></ix-icon-button>\n <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n {!props.hideShowAll && (\n <ix-button\n class=\"CardList__Title__Show__All\"\n ghost\n onClick={props.onShowAllClick}\n >\n <span>{props.showAllLabel}</span>\n <span>\n {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n </span>\n </ix-button>\n )}\n </div>\n );\n}\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-card-list',\n styleUrl: 'card-list.scss',\n shadow: true,\n})\nexport class CardList {\n /\n Name the card list\n /\n @Prop() label: string;\n\n /\n Collapse the list\n /\n @Prop({ mutable: true }) collapse = false;\n\n /\n List style\n /\n @Prop() listStyle: 'stack' \| 'scroll' = 'stack';\n\n /\n Maximal visible cards\n \n @internal\n /\n @Prop() maxVisibleCards = 12;\n\n /\n Overwrite the default show all count.\n * /\n @Prop() showAllCount: number \| undefined;\n\n /\n Suppress the overflow handling of child elements\n /\n @Prop() suppressOverflowHandling = false;\n\n /\n Hide the show all button\n \n @since 2.2.0\n /\n @Prop() hideShowAll = false;\n\n /\n i18n Show all button\n /\n @Prop() i18nShowAll = 'Show all';\n\n /\n i18n More cards available\n /\n @Prop() i18nMoreCards = 'There are more cards available';\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() collapseChanged: EventEmitter<boolean>;\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() showAllClick: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n /\n Fire event when the show more card is clicked.\n /\n @Event() showMoreCardClick: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n @Element() hostElement: HTMLIxCardListElement;\n\n @State() private hasOverflowingElements = false;\n @State() private numberOfOverflowingElements = 0;\n @State() private numberOfAllChildElements = 0;\n @State() private leftScrollDistance = 0;\n @State() private rightScrollDistance = 0;\n\n private observer: MutationObserver;\n\n private onCardListVisibilityToggle() {\n this.collapse = !this.collapse;\n this.collapseChanged.emit(this.collapse);\n }\n\n private onShowAllClick(event: MouseEvent) {\n this.showAllClick.emit({\n nativeEvent: event,\n });\n }\n\n private getListChildren() {\n const slot = this.hostElement.shadowRoot.querySelector(\n '.CardList__Content > slot'\n ) as HTMLSlotElement;\n return slot.assignedElements({ flatten: true });\n }\n\n private changeVisibilityOfSlotChildren() {\n const childElements = this.getListChildren();\n childElements.forEach((element, index) => {\n if (element instanceof HTMLElement) {\n if (index > this.maxVisibleCards - 1) {\n element.classList.add('d-none');\n return;\n }\n element.classList.remove('d-none');\n }\n });\n this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n this.numberOfOverflowingElements =\n childElements.length - this.maxVisibleCards;\n\n this.numberOfAllChildElements = childElements.length;\n this.detectOverflow();\n }\n\n private registerOverflowHandler() {\n this.observer = createMutationObserver(() => {\n this.changeVisibilityOfSlotChildren();\n });\n\n this.observer.observe(\n this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n {\n childList: true,\n subtree: true,\n }\n );\n\n requestAnimationFrame(() => {\n this.changeVisibilityOfSlotChildren();\n });\n }\n\n private shouldHandleOverflow() {\n if (this.suppressOverflowHandling) {\n return false;\n }\n if (this.listStyle === 'stack' \|\| this.listStyle === 'scroll') {\n return true;\n }\n }\n\n private get listElement() {\n return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n }\n\n private onCardListScroll() {\n this.detectOverflow();\n }\n\n private isShowMoreCardVisible() {\n return (\n this.suppressOverflowHandling === false && this.hasOverflowingElements\n );\n }\n\n private getOpacityFromScrollDistance(distance: number) {\n if (!this.listElement) {\n return 0;\n }\n\n if (distance === 0) {\n return 0;\n }\n\n if (distance > 100) {\n return 1;\n }\n\n return distance / 100;\n }\n\n private computeMaskLayer() {\n const maxOverflowWidth = 80;\n const maskLayer = `linear-gradient(\n 90deg,\n transparent 0px,\n black ${\n maxOverflowWidth \n (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n }px,\n black calc(100% - ${\n maxOverflowWidth *\n (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n ? 1\n : 0)\n }px),\n transparent 100%\n )`;\n return {\n '--ix-card-list-overflow': maskLayer,\n };\n }\n\n @Listen('resize', { target: 'window' })\n private detectOverflow() {\n const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n this.leftScrollDistance = scrollLeft;\n this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n }\n\n componentDidLoad() {\n if (this.shouldHandleOverflow()) {\n this.registerOverflowHandler();\n }\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <CardListTitle\n isCollapsed={this.collapse}\n label={this.label}\n showAllLabel={this.i18nShowAll}\n showAllCounter={\n this.showAllCount === undefined\n ? this.numberOfAllChildElements\n : this.showAllCount\n }\n onClick={() => this.onCardListVisibilityToggle()}\n onShowAllClick={(e) => this.onShowAllClick(e)}\n hideShowAll={this.hideShowAll}\n ></CardListTitle>\n <div\n class={{\n CardList__Overflow: true,\n }}\n style={this.computeMaskLayer()}\n >\n <div\n class={{\n CardList__Content: true,\n CardList__Content__Collapsed: this.collapse,\n CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n }}\n onScroll={() => this.onCardListScroll()}\n >\n <slot\n onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n ></slot>\n {this.isShowMoreCardVisible() ? (\n <ix-card\n class={{\n Show__All__Card: true,\n }}\n onClick={(event) =>\n this.showMoreCardClick.emit({\n nativeEvent: event,\n })\n }\n >\n <ix-card-content class=\"Show__All__Card__Content\">\n <ix-icon\n name={'more-menu'}\n size={'32'}\n class={'Show__All__Card__Icon'}\n ></ix-icon>\n <span class=\"Show__All__Card__Text\">\n {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n </span>\n </ix-card-content>\n </ix-card>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-category-filter.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './filter-chip.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './spinner.js';
-const categoryFilterCss = ":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}: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}: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{min-width:5rem}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);-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.143em;color:var(--theme-color-std-text);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color var(--theme-default-time);box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color);background-color:transparent}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active,.dropdown-item:not(.disabled):not(:disabled).active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);margin-inline-end:0.5rem}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}.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}label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{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;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);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)}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,input:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus,input:focus{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-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-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{box-shadow:none;background-color:transparent;outline:none;border:none;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{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{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;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);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)}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,textarea:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{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-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-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{box-shadow:none;background-color:transparent;outline:none;border:none;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{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;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}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:block;position:relative;height:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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(:focus-visible:not(.disabled):not(:disabled)){border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}:host .reset-button{position:absolute;top:0.25rem;right:0.25rem}:host .reset-button.hide-reset-button{display:none}:host .input-container{display:flex;height:auto;max-height:3.75rem;padding:1px 1.5rem 1px 1.75rem !important}:host .input-container:not(.readonly):not(.disabled){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;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);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)}:host .input-container:not(.readonly):not(.disabled):-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}:host .input-container:not(.readonly):not(.disabled):-webkit-autofill,:host .input-container:not(.readonly):not(.disabled):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}:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled)::placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled).hover,:host .input-container:not(.readonly):not(.disabled):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled).focus,:host .input-container:not(.readonly):not(.disabled):focus{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}:host .input-container:not(.readonly):not(.disabled):disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder{color:transparent}:host .input-container:not(.readonly):not(.disabled):disabled::placeholder{color:transparent}:host .input-container.disabled{color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly{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;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);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)}:host .input-container.readonly:-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}:host .input-container.readonly:-webkit-autofill,:host .input-container.readonly: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}:host .input-container.readonly::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly::placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly.hover,:host .input-container.readonly:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly.focus,:host .input-container.readonly:focus{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}:host .input-container.readonly:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only,:host .input-container.readonly:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only::-moz-placeholder,:host .input-container.readonly:read-only::-moz-placeholder{color:transparent}:host .input-container.readonly:-moz-read-only::placeholder{color:transparent}:host .input-container.readonly.read-only::placeholder,:host .input-container.readonly:read-only::placeholder{color:transparent}:host .input-container.readonly:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly:disabled::-moz-placeholder{color:transparent}:host .input-container.readonly:disabled::placeholder{color:transparent}:host .input-container.no-icon{padding-left:0.25rem}:host .token-container{flex-grow:1;overflow:hidden}:host .text-input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);width:auto;height:1.75rem;min-height:1.5rem;background:transparent;flex-grow:1;box-shadow:none}:host .text-input,:host .text-input:hover,:host .text-input:focus-visible{border:none;outline:none}:host .text-input.hide-placeholder::-moz-placeholder{opacity:0}:host .text-input.hide-placeholder::placeholder{opacity:0}:host .list-unstyled{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}:host ix-icon{position:absolute;top:0.5rem;left:0.5rem}:host ix-filter-chip{margin-right:0.25rem}:host .category-preview{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}:host ul{height:100%}:host ul>li,:host input{padding-inline-start:0;padding-top:2px;padding-bottom:2px}:host ix-dropdown{min-width:10rem !important}:host ix-dropdown .dropdown-item-container{display:flex;flex-direction:column}:host ix-dropdown .dropdown-item-container .dropdown-item{-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.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border:1px solid transparent;border-radius:100rem;width:auto;justify-content:flex-start;flex-grow:1}:host ix-dropdown .dropdown-item-container .dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr)}:host ix-dropdown .dropdown-item-container .category-item{border-end-end-radius:0;border-start-end-radius:0}:host ix-dropdown .dropdown-item-container .category-item-value{border-start-start-radius:0;border-end-start-radius:0}:host ix-dropdown .btn-toggle-operator{width:2rem;height:2rem;margin-inline:0.5rem}:host .d-none{display:none}";
+const categoryFilterCss = ":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}: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{min-width:5rem}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);-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.143em;color:var(--theme-color-std-text);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color var(--theme-default-time);box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color);background-color:transparent}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active,.dropdown-item:not(.disabled):not(:disabled).active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);margin-inline-end:0.5rem}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}.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}label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{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;min-height:2rem;width:100%;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)}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:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{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:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{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-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-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{box-shadow:none;background-color:transparent;outline:none;border:none;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{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{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;min-height:2rem;width:100%;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)}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:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{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:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{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-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-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{box-shadow:none;background-color:transparent;outline:none;border:none;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{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;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}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}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]){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{border-color:var(--theme-input--border-color--warning--active) !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)}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){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{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:block;position:relative;height: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 ::-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 .reset-button{position:absolute;top:0.25rem;right:0.25rem}:host .reset-button.hide-reset-button{display:none}:host .input-container{display:flex;height:auto;max-height:3.75rem;padding:1px 1.5rem 1px 1.75rem !important}:host .input-container:not(.readonly):not(.disabled){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;min-height:2rem;width:100%;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)}:host .input-container:not(.readonly):not(.disabled):-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}:host .input-container:not(.readonly):not(.disabled):-webkit-autofill,:host .input-container:not(.readonly):not(.disabled):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}:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled)::placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{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}:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{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}:host .input-container:not(.readonly):not(.disabled):disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder{color:transparent}:host .input-container:not(.readonly):not(.disabled):disabled::placeholder{color:transparent}:host .input-container:not(.readonly):not(.disabled):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled).focus{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}:host .input-container.disabled{color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly{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;min-height:2rem;width:100%;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)}:host .input-container.readonly:-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}:host .input-container.readonly:-webkit-autofill,:host .input-container.readonly: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}:host .input-container.readonly::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly::placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{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}:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{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}:host .input-container.readonly:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only,:host .input-container.readonly:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only::-moz-placeholder,:host .input-container.readonly:read-only::-moz-placeholder{color:transparent}:host .input-container.readonly:-moz-read-only::placeholder{color:transparent}:host .input-container.readonly.read-only::placeholder,:host .input-container.readonly:read-only::placeholder{color:transparent}:host .input-container.readonly:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly:disabled::-moz-placeholder{color:transparent}:host .input-container.readonly:disabled::placeholder{color:transparent}:host .input-container.no-icon{padding-left:0.25rem}:host .token-container{flex-grow:1;overflow:hidden}:host .text-input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);width:auto;height:1.75rem;min-height:1.5rem;background:transparent;flex-grow:1;box-shadow:none}:host .text-input,:host .text-input:hover,:host .text-input:focus :host .text-input:focus-visible{border:none !important;outline:none !important}:host .text-input.hide-placeholder::-moz-placeholder{opacity:0}:host .text-input.hide-placeholder::placeholder{opacity:0}:host .list-unstyled{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}:host ix-icon{position:absolute;top:0.5rem;left:0.5rem}:host ix-filter-chip{margin-right:0.25rem}:host .category-preview{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}:host ul{height:100%}:host ul>li,:host input{padding-inline-start:0;padding-top:2px;padding-bottom:2px}:host ix-dropdown{min-width:10rem !important}:host ix-dropdown .dropdown-item-container{display:flex;flex-direction:column}:host ix-dropdown .dropdown-item-container .dropdown-item{-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.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border:1px solid transparent;border-radius:100rem;width:auto;justify-content:flex-start;flex-grow:1}:host ix-dropdown .dropdown-item-container .dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr)}:host ix-dropdown .dropdown-item-container .category-item{border-end-end-radius:0;border-start-end-radius:0}:host ix-dropdown .dropdown-item-container .category-item-value{border-start-start-radius:0;border-end-start-radius:0}:host ix-dropdown .btn-toggle-operator{width:2rem;height:2rem;margin-inline:0.5rem}:host .d-none{display:none}";
 const IxCategoryFilterStyle0 = categoryFilterCss;
 const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class CategoryFilter extends HTMLElement {
@@ -344,7 +344,10 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class CategoryFilter ext
     renderCategoryValues() {
         var _a, _b;
         return (h("div", { class: "dropdown-item-container" }, this.renderOperatorButton(), h("div", { class: "dropdown-header" }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label), (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 :
-            _b.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("button", { class: "dropdown-item category-item-value", "data-id": id, title: id, key: id, onClick: () => this.addToken(id, this.category) }, `${this.getFilterOperatorString()} ${id}`)))));
+            _b.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("button", { class: "dropdown-item category-item-value", "data-id": id, title: id, key: id, onClick: (e) => {
+                    e.preventDefault();
+                    this.addToken(id, this.category);
+                } }, `${this.getFilterOperatorString()} ${id}`)))));
     }
     renderDropdownContent() {
         if (this.hasCategorySelection()) {
@@ -404,19 +407,19 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class CategoryFilter ext
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ed593bf02543787202e00fd780a7ed5e1aa70822' }, h("form", { key: '5ca9f28201cc5d6b505cb2c1d61251c8a527a100', ref: (el) => (this.formElement = el) }, h("div", { key: '3ea203f7eb77c54e8c2a76a8a19fd74284de496c', "read-only": this.readonly, class: {
+        return (h(Host, { key: '97bb9bcad06d6a787b844f74a4333c231761d0aa' }, h("form", { key: '8f26df740ee486e72227861241373fdccaed5b83', ref: (el) => (this.formElement = el) }, h("div", { key: '0a15103e3758ef442af9e5cdcb193ccf428ab588', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: '18474d20426046a25a00a2d4388709eace1b0de8', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: 'd9da49fe378d75b691704dea0c4dc0eb4140eb31', class: "token-container" }, h("ul", { key: '3ddb28dbe2a41cfaab3e43ac216c97ab6580a2fd', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: 'bcf843c92c0cb07f4882e154f22beb5b9d585155', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: '8f8873087dd4f858d8c05524fa57e60630e455fa', class: "token-container" }, h("ul", { key: 'ac256e8c54bee74655b96e30f7ff01867185f2b7', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("li", { class: {
                 'category-preview': true,
                 'd-none': this.category === undefined,
-            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '095e0450f11f61f9a30b8f3e680bbab05c519113', class: {
+            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '58e035c5bf86c7a4f7cc01e1975a13beaa67ef45', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly ||
                     this.disabled ||