@siemens/ix 2.0.1 → 2.0.3

package/components/a11y.js

@@ -14,8 +14,8 @@ const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
       const value = hostElement.getAttribute(attr);
       if (value !== null && !ignoreAttributes.includes(attr)) {
         attributeObject[attr] = hostElement.getAttribute(attr);
+        hostElement.removeAttribute(attr);
       }
-      hostElement.removeAttribute(attr);
     }
   });
   return attributeObject;

package/components/a11y.js.map

@@ -1 +1 @@
-{"file":"a11y.js","mappings":"AAAA;;;;;;;;MAQa,WAAW,GAAG,CAAC,KAAc,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,EAAE;MAE7D,kBAAkB,GAAG,CAChC,WAAwB,EACxB,mBAAwC,EAAE;EAE1C,MAAM,eAAe,GAAwB,EAAE,CAAC;EAChD,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI;IAC1B,IAAI,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;MAClC,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;MAC7C,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACtD,eAAe,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;OACxD;MACD,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;KACnC;GACF,CAAC,CAAC;EAEH,OAAO,eAAe,CAAC;AACzB,EAAE;AA4DF,MAAM,cAAc,GAAwB;EAC1C,MAAM;EACN,uBAAuB;EACvB,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,6BAA6B;EAC7B,WAAW;EACX,cAAc;EACd,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;EACd,eAAe;EACf,mBAAmB;EACnB,eAAe;EACf,aAAa;EACb,eAAe;EACf,aAAa;EACb,cAAc;EACd,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,sBAAsB;EACtB,kBAAkB;EAClB,WAAW;EACX,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,eAAe;EACf,eAAe;EACf,eAAe;EACf,sBAAsB;EACtB,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,WAAW;EACX,eAAe;EACf,eAAe;EACf,eAAe;EACf,gBAAgB;CACjB;;;;","names":[],"sources":["./src/components/utils/a11y.ts"],"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 */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n\nexport const a11yHostAttributes = (\n  hostElement: HTMLElement,\n  ignoreAttributes: A11yAttributeName[] = []\n): Record<A11yAttributeName, any> => {\n  const attributeObject: Record<string, any> = {};\n  a11yAttributes.forEach((attr) => {\n    if (hostElement.hasAttribute(attr)) {\n      const value = hostElement.getAttribute(attr);\n      if (value !== null && !ignoreAttributes.includes(attr)) {\n        attributeObject[attr] = hostElement.getAttribute(attr);\n      }\n      hostElement.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n};\n\ntype PartialRecord<K extends keyof any, T> = {\n  [P in K]?: T;\n};\nexport type A11yAttributes = PartialRecord<A11yAttributeName, any>;\n\nexport type A11yAttributeName =\n  | 'role'\n  | 'aria-activedescendant'\n  | 'aria-atomic'\n  | 'aria-autocomplete'\n  | 'aria-braillelabel'\n  | 'aria-brailleroledescription'\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-colcount'\n  | 'aria-colindex'\n  | 'aria-colindextext'\n  | 'aria-colspan'\n  | 'aria-controls'\n  | 'aria-current'\n  | 'aria-describedby'\n  | 'aria-description'\n  | 'aria-details'\n  | 'aria-disabled'\n  | 'aria-errormessage'\n  | 'aria-expanded'\n  | 'aria-flowto'\n  | 'aria-haspopup'\n  | 'aria-hidden'\n  | 'aria-invalid'\n  | 'aria-keyshortcuts'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-level'\n  | 'aria-live'\n  | 'aria-multiline'\n  | 'aria-multiselectable'\n  | 'aria-orientation'\n  | 'aria-owns'\n  | 'aria-placeholder'\n  | 'aria-posinset'\n  | 'aria-pressed'\n  | 'aria-readonly'\n  | 'aria-relevant'\n  | 'aria-required'\n  | 'aria-roledescription'\n  | 'aria-rowcount'\n  | 'aria-rowindex'\n  | 'aria-rowindextext'\n  | 'aria-rowspan'\n  | 'aria-selected'\n  | 'aria-setsize'\n  | 'aria-sort'\n  | 'aria-valuemax'\n  | 'aria-valuemin'\n  | 'aria-valuenow'\n  | 'aria-valuetext';\n\nconst a11yAttributes: A11yAttributeName[] = [\n  'role',\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n];\n"],"version":3}
+{"file":"a11y.js","mappings":"AAAA;;;;;;;;MAQa,WAAW,GAAG,CAAC,KAAc,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,EAAE;MAE7D,kBAAkB,GAAG,CAChC,WAAwB,EACxB,mBAAwC,EAAE;EAE1C,MAAM,eAAe,GAAwB,EAAE,CAAC;EAChD,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI;IAC1B,IAAI,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;MAClC,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;MAC7C,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACtD,eAAe,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACvD,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;OACnC;KACF;GACF,CAAC,CAAC;EAEH,OAAO,eAAe,CAAC;AACzB,EAAE;AA4DF,MAAM,cAAc,GAAwB;EAC1C,MAAM;EACN,uBAAuB;EACvB,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,6BAA6B;EAC7B,WAAW;EACX,cAAc;EACd,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;EACd,eAAe;EACf,mBAAmB;EACnB,eAAe;EACf,aAAa;EACb,eAAe;EACf,aAAa;EACb,cAAc;EACd,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,sBAAsB;EACtB,kBAAkB;EAClB,WAAW;EACX,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,eAAe;EACf,eAAe;EACf,eAAe;EACf,sBAAsB;EACtB,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,WAAW;EACX,eAAe;EACf,eAAe;EACf,eAAe;EACf,gBAAgB;CACjB;;;;","names":[],"sources":["./src/components/utils/a11y.ts"],"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 */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n\nexport const a11yHostAttributes = (\n  hostElement: HTMLElement,\n  ignoreAttributes: A11yAttributeName[] = []\n): Record<A11yAttributeName, any> => {\n  const attributeObject: Record<string, any> = {};\n  a11yAttributes.forEach((attr) => {\n    if (hostElement.hasAttribute(attr)) {\n      const value = hostElement.getAttribute(attr);\n      if (value !== null && !ignoreAttributes.includes(attr)) {\n        attributeObject[attr] = hostElement.getAttribute(attr);\n        hostElement.removeAttribute(attr);\n      }\n    }\n  });\n\n  return attributeObject;\n};\n\ntype PartialRecord<K extends keyof any, T> = {\n  [P in K]?: T;\n};\nexport type A11yAttributes = PartialRecord<A11yAttributeName, any>;\n\nexport type A11yAttributeName =\n  | 'role'\n  | 'aria-activedescendant'\n  | 'aria-atomic'\n  | 'aria-autocomplete'\n  | 'aria-braillelabel'\n  | 'aria-brailleroledescription'\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-colcount'\n  | 'aria-colindex'\n  | 'aria-colindextext'\n  | 'aria-colspan'\n  | 'aria-controls'\n  | 'aria-current'\n  | 'aria-describedby'\n  | 'aria-description'\n  | 'aria-details'\n  | 'aria-disabled'\n  | 'aria-errormessage'\n  | 'aria-expanded'\n  | 'aria-flowto'\n  | 'aria-haspopup'\n  | 'aria-hidden'\n  | 'aria-invalid'\n  | 'aria-keyshortcuts'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-level'\n  | 'aria-live'\n  | 'aria-multiline'\n  | 'aria-multiselectable'\n  | 'aria-orientation'\n  | 'aria-owns'\n  | 'aria-placeholder'\n  | 'aria-posinset'\n  | 'aria-pressed'\n  | 'aria-readonly'\n  | 'aria-relevant'\n  | 'aria-required'\n  | 'aria-roledescription'\n  | 'aria-rowcount'\n  | 'aria-rowindex'\n  | 'aria-rowindextext'\n  | 'aria-rowspan'\n  | 'aria-selected'\n  | 'aria-setsize'\n  | 'aria-sort'\n  | 'aria-valuemax'\n  | 'aria-valuemin'\n  | 'aria-valuenow'\n  | 'aria-valuetext';\n\nconst a11yAttributes: A11yAttributeName[] = [\n  'role',\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n];\n"],"version":3}

package/components/application-header.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { m as menuController, a as applicationLayoutService } from './menu-service.js';
+import { a as useContextConsumer, A as ApplicationLayoutContext } from './context.js';
 import { d as defineCustomElement$3 } from './burger-menu.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 import { d as defineCustomElement$1 } from './spinner.js';
@@ -14,15 +15,27 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
     this.name = undefined;
     this.breakpoint = 'lg';
     this.menuExpanded = false;
+    this.suppressResponsive = false;
   }
   componentWillLoad() {
+    useContextConsumer(this.hostElement, ApplicationLayoutContext, (ctx) => {
+      if ((ctx === null || ctx === void 0 ? void 0 : ctx.host) === 'map-navigation') {
+        this.suppressResponsive = true;
+        this.breakpoint = 'md';
+        return;
+      }
+      this.breakpoint = applicationLayoutService.breakpoint;
+    });
     this.menuDisposable = menuController.expandChange.on((show) => {
       this.menuExpanded = show;
     });
     this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      if (this.suppressResponsive) {
+        this.breakpoint = 'md';
+        return;
+      }
       this.breakpoint = mode;
     });
-    this.breakpoint = applicationLayoutService.breakpoint;
   }
   componentDidLoad() {
     this.attachSiemensLogoIfLoaded();
@@ -52,14 +65,15 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
     menuController.toggle();
   }
   render() {
-    return (h(Host, { class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' ? (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })) : null, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "name" }, this.name), h("slot", null)));
+    return (h(Host, { class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false ? (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })) : null, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "name" }, this.name), h("slot", null)));
   }
   get hostElement() { return this; }
   static get style() { return applicationHeaderCss; }
 }, [1, "ix-application-header", {
     "name": [1],
     "breakpoint": [32],
-    "menuExpanded": [32]
+    "menuExpanded": [32],
+    "suppressResponsive": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/components/application-header.js.map

@@ -1 +1 @@
-{"file":"application-header.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,mqBAAmqB;;MCoBnrB,iBAAiB;;;;;;sBAQM,IAAI;wBACd,KAAK;;EAK7B,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI;MACxD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;GACvD;EAED,gBAAgB;IACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;GAClC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAEO,aAAa;IACnB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC3D,mBAAmB,CACD,CAAC;IACrB,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;MACtC,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;GAC3B;EAEO,MAAM,yBAAyB;IACrC,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;MACzB,IAAI,CAAC,WAAW,CAAC,UAAU;SACxB,aAAa,CAAC,OAAO,CAAC;SACtB,WAAW,CAAC,WAAW,CAAC,CAAC;KAC7B;GACF;EAEO,MAAM,WAAW;IACvB,cAAc,CAAC,MAAM,EAAE,CAAC;GACzB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,EAAE,EAClD,IAAI,EAAC,oBAAoB,IAExB,IAAI,CAAC,UAAU,KAAK,IAAI,IACvB,sBACE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACX,IAChB,IAAI,EACR,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","./src/components/application-header/application-header.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:host {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 2.75rem;\n  min-height: 2.75rem;\n  padding-left: 1rem;\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .name {\n    margin-left: 2.5rem;\n    margin-right: 2.5rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n  }\n}\n\n:host(.breakpoint-sm) {\n  padding-left: 0.5rem;\n\n  .logo {\n    margin-left: 0.5rem;\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name: string;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n\n  componentWillLoad() {\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private async attachSiemensLogoIfLoaded() {\n    await window.customElements.whenDefined('ix-siemens-logo');\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement.shadowRoot\n        .querySelector('.logo')\n        .appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    menuController.toggle();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ [`breakpoint-${this.breakpoint}`]: true }}\n        slot=\"application-header\"\n      >\n        {this.breakpoint === 'sm' ? (\n          <ix-burger-menu\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-burger-menu>\n        ) : null}\n        <div class=\"logo\">\n          <slot name=\"logo\"></slot>\n        </div>\n        <div class=\"name\">{this.name}</div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"application-header.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,mqBAAmqB;;MCsBnrB,iBAAiB;;;;;;sBAQM,IAAI;wBACd,KAAK;8BAEC,KAAK;;EAKnC,iBAAiB;IACf,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,wBAAwB,EAAE,CAAC,GAAG;MACjE,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,gBAAgB,EAAE;QAClC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,OAAO;OACR;MAED,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;KACvD,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI;MACxD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;MAC9D,IAAI,IAAI,CAAC,kBAAkB,EAAE;QAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,OAAO;OACR;MAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;GAClC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAEO,aAAa;IACnB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC3D,mBAAmB,CACD,CAAC;IACrB,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;MACtC,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;GAC3B;EAEO,MAAM,yBAAyB;IACrC,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;MACzB,IAAI,CAAC,WAAW,CAAC,UAAU;SACxB,aAAa,CAAC,OAAO,CAAC;SACtB,WAAW,CAAC,WAAW,CAAC,CAAC;KAC7B;GACF;EAEO,MAAM,WAAW;IACvB,cAAc,CAAC,MAAM,EAAE,CAAC;GACzB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,EAAE,EAClD,IAAI,EAAC,oBAAoB,IAExB,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,kBAAkB,KAAK,KAAK,IAC5D,sBACE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACX,IAChB,IAAI,EACR,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","./src/components/application-header/application-header.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:host {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 2.75rem;\n  min-height: 2.75rem;\n  padding-left: 1rem;\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .name {\n    margin-left: 2.5rem;\n    margin-right: 2.5rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n  }\n}\n\n:host(.breakpoint-sm) {\n  padding-left: 0.5rem;\n\n  .logo {\n    margin-left: 0.5rem;\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name: string;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n\n  @State() suppressResponsive = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n\n  componentWillLoad() {\n    useContextConsumer(this.hostElement, ApplicationLayoutContext, (ctx) => {\n      if (ctx?.host === 'map-navigation') {\n        this.suppressResponsive = true;\n        this.breakpoint = 'md';\n        return;\n      }\n\n      this.breakpoint = applicationLayoutService.breakpoint;\n    });\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        this.breakpoint = 'md';\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private async attachSiemensLogoIfLoaded() {\n    await window.customElements.whenDefined('ix-siemens-logo');\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement.shadowRoot\n        .querySelector('.logo')\n        .appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    menuController.toggle();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ [`breakpoint-${this.breakpoint}`]: true }}\n        slot=\"application-header\"\n      >\n        {this.breakpoint === 'sm' && this.suppressResponsive === false ? (\n          <ix-burger-menu\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-burger-menu>\n        ) : null}\n        <div class=\"logo\">\n          <slot name=\"logo\"></slot>\n        </div>\n        <div class=\"name\">{this.name}</div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/breadcrumb-item.js

@@ -4,7 +4,7 @@ import { B as BaseButton } from './base-button.js';
 import { b as a11yHostAttributes } from './a11y.js';
 import { d as defineCustomElement$1 } from './spinner.js';
 
-const breadcrumbItemCss = ":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(.disabled){cursor:default}: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) .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) .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) .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) .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) .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) .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}: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(.disabled){cursor:default}: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) .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) .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) .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) .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) .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) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;margin-right:0.25rem;max-width:15rem;min-width:0}: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 li{display:contents}:host .btn{pointer-events:all;width:-moz-fit-content;width:fit-content;padding-right:0;padding-left:0.25rem}:host .chevron{pointer-events:none;margin-left:0.5rem;margin-right:0rem;color:var(--theme-color-soft-text)}:host ::slotted(a[href]){text-decoration:none !important}:host ::slotted(a[href]:active){text-decoration:none !important}:host(:last-child) .btn:not(.dropdown-trigger){color:var(--theme-color-soft-text)}:host(.hide-chevron){cursor:default}:host(.hide-chevron) .btn{padding-right:0.5rem;pointer-events:none}:host(.invisible){display:none}:host(:focus-visible){outline:none}";
+const breadcrumbItemCss = ":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(.disabled){cursor:default}: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}: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(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;margin-right:0.25rem;max-width:15rem;min-width:0}: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 li{display:contents}:host .btn{pointer-events:all;width:-moz-fit-content;width:fit-content;padding-right:0;padding-left:0.25rem}:host .chevron{pointer-events:none;margin-left:0.5rem;margin-right:0rem;color:var(--theme-color-soft-text)}:host ::slotted(a[href]){text-decoration:none !important}:host ::slotted(a[href]:active){text-decoration:none !important}:host(:last-child) .btn:not(.dropdown-trigger){color:var(--theme-color-soft-text)}:host(.hide-chevron){cursor:default}:host(.hide-chevron) .btn{padding-right:0.5rem;pointer-events:none}:host(.invisible){display:none}:host(:focus-visible){outline:none}";
 
 const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem extends HTMLElement {
   constructor() {
@@ -18,10 +18,18 @@ const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem ext
     this.visible = true;
     this.showChevron = true;
     this.isDropdownTrigger = false;
+    this.a11y = undefined;
   }
   componentDidLoad() {
     this.animationFadeIn();
   }
+  componentWillLoad() {
+    this.a11y = a11yHostAttributes(this.hostElement, [
+      'aria-describedby',
+      'aria-controls',
+      'aria-expanded',
+    ]);
+  }
   animationFadeIn() {
     anime({
       targets: this.hostElement,
@@ -32,7 +40,6 @@ const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem ext
     });
   }
   render() {
-    const a11y = a11yHostAttributes(this.hostElement);
     const props = {
       variant: this.ghost ? 'primary' : 'secondary',
       outline: false,
@@ -49,7 +56,7 @@ const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem ext
       extraClasses: {
         'dropdown-trigger': this.isDropdownTrigger,
       },
-      ariaAttributes: a11y,
+      ariaAttributes: this.a11y,
     };
     if (!this.visible) {
       return h(Host, { class: 'invisible' });
@@ -66,7 +73,8 @@ const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem ext
     "ghost": [4],
     "visible": [4],
     "showChevron": [4, "show-chevron"],
-    "isDropdownTrigger": [4, "is-dropdown-trigger"]
+    "isDropdownTrigger": [4, "is-dropdown-trigger"],
+    "a11y": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/components/breadcrumb-item.js.map

@@ -1 +1 @@
-{"file":"breadcrumb-item.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,qy9BAAqy9B;;MCmClz9B,cAAc;;;;;;;;iBAcA,IAAI;mBAGX,IAAI;uBAGA,IAAI;6BAGE,KAAK;;EAKjC,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,eAAe;IACbA,KAAO,CAAC;MACN,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,GAAG;MACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;MAC3B,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,KAAK,GAAoB;MAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW;MAC7C,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI;MACd,OAAO,EAAE,KAAK;MACd,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,QAAQ;MACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;MAClE,YAAY,EAAE;QACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;OAC3C;MACD,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,WAAW,GAAS,CAAC;KAC1C;IAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;OAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAE9C,cACE,EAAC,UAAU,oBACL,KAAK,IACT,YAAY,EACV,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,IACf,eACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,IACT,IAAI,CACC,KAGZ,IAAI,CAAC,KAAK,EACX,eAAa,CACF,CACV,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["animejs"],"sources":["./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb-item/breadcrumb-item.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 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\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} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | string;\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={'chevron-right-small'}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"breadcrumb-item.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,iu+BAAiu+B;;MCoC9u+B,cAAc;;;;;;;;iBAcA,IAAI;mBAGX,IAAI;uBAGA,IAAI;6BAGE,KAAK;;;EAOjC,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;MAC/C,kBAAkB;MAClB,eAAe;MACf,eAAe;KAChB,CAAC,CAAC;GACJ;EAED,eAAe;IACbA,KAAO,CAAC;MACN,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,GAAG;MACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;MAC3B,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,KAAK,GAAoB;MAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW;MAC7C,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI;MACd,OAAO,EAAE,KAAK;MACd,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,QAAQ;MACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;MAClE,YAAY,EAAE;QACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;OAC3C;MACD,cAAc,EAAE,IAAI,CAAC,IAAI;KAC1B,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,WAAW,GAAS,CAAC;KAC1C;IAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;OAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAE9C,cACE,EAAC,UAAU,oBACL,KAAK,IACT,YAAY,EACV,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,IACf,eACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,IACT,IAAI,CACC,KAGZ,IAAI,CAAC,KAAK,EACX,eAAa,CACF,CACV,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["animejs"],"sources":["./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb-item/breadcrumb-item.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 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\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  State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | string;\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick: EventEmitter<string>;\n\n  @State() a11y: any;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement, [\n      'aria-describedby',\n      'aria-controls',\n      'aria-expanded',\n    ]);\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: this.a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={'chevron-right-small'}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/button.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BaseButton } from './base-button.js';
 import { d as defineCustomElement$1 } from './spinner.js';
 
-const buttonCss = ":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(.disabled){cursor:default}: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) .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) .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) .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) .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) .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) .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}";
+const buttonCss = ":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(.disabled){cursor:default}: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}";
 
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
   constructor() {

package/components/button.js.map

@@ -1 +1 @@
-{"file":"button.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,uvdAAuvd;;MCmB5vd,MAAM;;;;;mBAIgB,SAAS;mBAKxB,KAAK;iBAKP,KAAK;oBAKe,KAAK;gBAKL,QAAQ;mBAOjB,KAAK;;qBAQQ,QAAQ;oBAGT,IAAI;;EAS3C,gBAAgB;IACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MACtD,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACpC,YAAY,CAAC,IAAI,GAAG,QAAQ,CAAC;MAC7B,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;MAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;MAE3C,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;KACzC;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,mBAAmB,EAAE;MACtD,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;KAClC;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;MACxC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;OACxC,IAED,EAAC,UAAU,oBAAK,eAAe,GAC7B,eAAa,CACF,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=shadow","./src/components/button/button.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 './button-mixin';\n\n@include btn;\n$button-categories: (primary, secondary);\n@each $category in $button-categories {\n  @include btn-variant($category);\n  @include btn-variant('outline-#{$category}');\n  @include btn-variant('invisible-#{$category}', false);\n}\n\n:host {\n  min-width: 5rem;\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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\n\nexport type ButtonVariant = 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /** @internal */\n  @Prop() alignment: 'center' | 'start' = 'center';\n\n  /** @internal */\n  @Prop() iconSize: '12' | '16' | '24' = '24';\n\n  @Element() hostElement: HTMLIxButtonElement;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.iconSize,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      alignment: this.alignment,\n    };\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"button.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,q9dAAq9d;;MCmB19d,MAAM;;;;;mBAIgB,SAAS;mBAKxB,KAAK;iBAKP,KAAK;oBAKe,KAAK;gBAKL,QAAQ;mBAOjB,KAAK;;qBAQQ,QAAQ;oBAGT,IAAI;;EAS3C,gBAAgB;IACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MACtD,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACpC,YAAY,CAAC,IAAI,GAAG,QAAQ,CAAC;MAC7B,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;MAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;MAE3C,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;KACzC;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,mBAAmB,EAAE;MACtD,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;KAClC;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;MACxC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;OACxC,IAED,EAAC,UAAU,oBAAK,eAAe,GAC7B,eAAa,CACF,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=shadow","./src/components/button/button.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 './button-mixin';\n\n@include btn;\n$button-categories: (primary, secondary);\n@each $category in $button-categories {\n  @include btn-variant($category);\n  @include btn-variant('outline-#{$category}');\n  @include btn-variant('invisible-#{$category}', false);\n}\n\n:host {\n  min-width: 5rem;\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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\n\nexport type ButtonVariant = 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /** @internal */\n  @Prop() alignment: 'center' | 'start' = 'center';\n\n  /** @internal */\n  @Prop() iconSize: '12' | '16' | '24' = '24';\n\n  @Element() hostElement: HTMLIxButtonElement;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.iconSize,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      alignment: this.alignment,\n    };\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/dropdown.js

@@ -29,7 +29,10 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     if (dropdownDisposer.has(this.localUId)) {
       console.warn('Dropdown with duplicated id detected');
     }
-    dropdownDisposer.set(this.localUId, this.close.bind(this));
+    dropdownDisposer.set(this.localUId, {
+      dispose: this.close.bind(this),
+      element: this.hostElement,
+    });
   }
   get dropdownItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
@@ -123,9 +126,11 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
       }
     }
     if (newShow) {
-      dropdownDisposer.forEach((dispose, id) => {
-        if (id !== this.localUId && !this.isAnchorSubmenu()) {
-          dispose();
+      dropdownDisposer.forEach((entry, id) => {
+        if (id !== this.localUId &&
+          !this.isAnchorSubmenu() &&
+          !entry.element.contains(this.hostElement)) {
+          entry.dispose();
         }
       });
     }

package/components/dropdown.js.map

@@ -1 +1 @@
-{"file":"dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  background-color: var(--theme-color-2);\n  border-radius: var(--theme-default-border-radius);\n  @include ix-component;\n  min-width: 0px;\n  z-index: var(--theme-z-index-dropdown);\n  box-shadow: var(--theme-shadow-4);\n\n  padding: 0.25rem 0px;\n\n  .dropdown-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    color: var(--theme-menu-header--color);\n    padding: 0 $default-space;\n  }\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n\n:host(:not(.show)) {\n  display: none;\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  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { AlignedPlacement } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\ntype DisposeDropdown = () => void;\nconst dropdownDisposer = new Map<string, DisposeDropdown>();\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  private localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n\n    if (dropdownDisposer.has(this.localUId)) {\n      console.warn('Dropdown with duplicated id detected');\n    }\n\n    dropdownDisposer.set(this.localUId, this.close.bind(this));\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        this.triggerElement.addEventListener('click', this.openBind);\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n\n    if (newShow) {\n      dropdownDisposer.forEach((dispose, id) => {\n        if (id !== this.localUId && !this.isAnchorSubmenu()) {\n          dispose();\n        }\n      });\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: PointerEvent) {\n    const target = event.target as HTMLElement;\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    const clickInsideDropdown = this.isClickInsideDropdown(event);\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!clickInsideDropdown || this.anchor === target) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (clickInsideDropdown && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  keydown(event: KeyboardEvent) {\n    if (this.show === true && event.code === 'Escape') {\n      this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(this.show);\n\n    if (!defaultPrevented) {\n      this.show = !this.show;\n    }\n  }\n\n  private open(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(true);\n\n    if (!defaultPrevented) {\n      this.show = true;\n    }\n  }\n\n  private close() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n\n    if (!defaultPrevented) {\n      this.show = false;\n    }\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger, null);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n\n    if (\n      this.isAnchorSubmenu() &&\n      this.anchorElement?.tagName === 'IX-DROPDOWN-ITEM'\n    ) {\n      (this.anchorElement as HTMLIxDropdownItemElement).isSubMenu = true;\n    }\n  }\n\n  private isClickInsideDropdown(event: PointerEvent) {\n    const rect = this.dropdownRef.getBoundingClientRect();\n    return (\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (dropdownDisposer.has(this.localUId)) {\n      dropdownDisposer.delete(this.localUId);\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  background-color: var(--theme-color-2);\n  border-radius: var(--theme-default-border-radius);\n  @include ix-component;\n  min-width: 0px;\n  z-index: var(--theme-z-index-dropdown);\n  box-shadow: var(--theme-shadow-4);\n\n  padding: 0.25rem 0px;\n\n  .dropdown-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    color: var(--theme-menu-header--color);\n    padding: 0 $default-space;\n  }\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n\n:host(:not(.show)) {\n  display: none;\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  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { AlignedPlacement } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\ntype DisposeDropdown = () => void;\ntype DropdownDisposerEntry = {\n  element: HTMLIxDropdownElement;\n  dispose: DisposeDropdown;\n};\nconst dropdownDisposer = new Map<string, DropdownDisposerEntry>();\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  private localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n\n    if (dropdownDisposer.has(this.localUId)) {\n      console.warn('Dropdown with duplicated id detected');\n    }\n\n    dropdownDisposer.set(this.localUId, {\n      dispose: this.close.bind(this),\n      element: this.hostElement,\n    });\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        this.triggerElement.addEventListener('click', this.openBind);\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n\n    if (newShow) {\n      dropdownDisposer.forEach((entry, id) => {\n        if (\n          id !== this.localUId &&\n          !this.isAnchorSubmenu() &&\n          !entry.element.contains(this.hostElement)\n        ) {\n          entry.dispose();\n        }\n      });\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: PointerEvent) {\n    const target = event.target as HTMLElement;\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    const clickInsideDropdown = this.isClickInsideDropdown(event);\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!clickInsideDropdown || this.anchor === target) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (clickInsideDropdown && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  keydown(event: KeyboardEvent) {\n    if (this.show === true && event.code === 'Escape') {\n      this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(this.show);\n\n    if (!defaultPrevented) {\n      this.show = !this.show;\n    }\n  }\n\n  private open(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(true);\n\n    if (!defaultPrevented) {\n      this.show = true;\n    }\n  }\n\n  private close() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n\n    if (!defaultPrevented) {\n      this.show = false;\n    }\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger, null);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n\n    if (\n      this.isAnchorSubmenu() &&\n      this.anchorElement?.tagName === 'IX-DROPDOWN-ITEM'\n    ) {\n      (this.anchorElement as HTMLIxDropdownItemElement).isSubMenu = true;\n    }\n  }\n\n  private isClickInsideDropdown(event: PointerEvent) {\n    const rect = this.dropdownRef.getBoundingClientRect();\n    return (\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (dropdownDisposer.has(this.localUId)) {\n      dropdownDisposer.delete(this.localUId);\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}