@siemens/ix 2.0.0-beta.1 → 2.0.1

package/components/a11y.js

@@ -0,0 +1,79 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const a11yBoolean = (value) => (value ? 'true' : 'false');
+const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
+  const attributeObject = {};
+  a11yAttributes.forEach((attr) => {
+    if (hostElement.hasAttribute(attr)) {
+      const value = hostElement.getAttribute(attr);
+      if (value !== null && !ignoreAttributes.includes(attr)) {
+        attributeObject[attr] = hostElement.getAttribute(attr);
+      }
+      hostElement.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+const a11yAttributes = [
+  'role',
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-braillelabel',
+  'aria-brailleroledescription',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colindextext',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-description',
+  'aria-details',
+  'aria-disabled',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowindextext',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+];
+
+export { a11yBoolean as a, a11yHostAttributes as b };
+
+//# sourceMappingURL=a11y.js.map

package/components/a11y.js.map

@@ -0,0 +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}

package/components/application-header.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { m as menuController, a as applicationLayoutService } from './menu-service.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';
+
+const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;min-height:2.75rem;padding-left:1rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}:host .name{margin-left:2.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color)}:host(.breakpoint-sm){padding-left:0.5rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";
+
+const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.name = undefined;
+    this.breakpoint = 'lg';
+    this.menuExpanded = false;
+  }
+  componentWillLoad() {
+    this.menuDisposable = menuController.expandChange.on((show) => {
+      this.menuExpanded = show;
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+  }
+  componentDidLoad() {
+    this.attachSiemensLogoIfLoaded();
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.menuDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.modeDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+  }
+  isLogoSlotted() {
+    const slotElement = this.hostElement.shadowRoot.querySelector('slot[name="logo"]');
+    const nodes = slotElement.assignedNodes({
+      flatten: true,
+    });
+    return nodes.length !== 0;
+  }
+  async attachSiemensLogoIfLoaded() {
+    await window.customElements.whenDefined('ix-siemens-logo');
+    const logoElement = document.createElement('ix-siemens-logo');
+    if (!this.isLogoSlotted()) {
+      this.hostElement.shadowRoot
+        .querySelector('.logo')
+        .appendChild(logoElement);
+    }
+  }
+  async onMenuClick() {
+    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)));
+  }
+  get hostElement() { return this; }
+  static get style() { return applicationHeaderCss; }
+}, [1, "ix-application-header", {
+    "name": [1],
+    "breakpoint": [32],
+    "menuExpanded": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-application-header", "ix-burger-menu", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-application-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ApplicationHeader);
+      }
+      break;
+    case "ix-burger-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ApplicationHeader as A, defineCustomElement as d };
+
+//# sourceMappingURL=application-header.js.map

package/components/application-header.js.map

@@ -0,0 +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}

package/components/breadcrumb-item.js

@@ -0,0 +1,92 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+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 BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.label = undefined;
+    this.icon = undefined;
+    this.ghost = true;
+    this.visible = true;
+    this.showChevron = true;
+    this.isDropdownTrigger = false;
+  }
+  componentDidLoad() {
+    this.animationFadeIn();
+  }
+  animationFadeIn() {
+    anime({
+      targets: this.hostElement,
+      duration: 150,
+      opacity: [0, 1],
+      translateX: ['-100%', '0%'],
+      easing: 'linear',
+    });
+  }
+  render() {
+    const a11y = a11yHostAttributes(this.hostElement);
+    const props = {
+      variant: this.ghost ? 'primary' : 'secondary',
+      outline: false,
+      ghost: this.ghost,
+      iconOnly: false,
+      iconOval: false,
+      disabled: false,
+      icon: this.icon,
+      iconSize: '16',
+      loading: false,
+      selected: false,
+      type: 'button',
+      tabIndex: this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,
+      extraClasses: {
+        'dropdown-trigger': this.isDropdownTrigger,
+      },
+      ariaAttributes: a11y,
+    };
+    if (!this.visible) {
+      return h(Host, { class: 'invisible' });
+    }
+    return (h(Host, { class: {
+        'hide-chevron': !this.showChevron,
+      }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, this.showChevron ? (h("ix-icon", { name: 'chevron-right-small', size: "16", class: 'chevron' })) : null) }), this.label, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return breadcrumbItemCss; }
+}, [1, "ix-breadcrumb-item", {
+    "label": [1],
+    "icon": [1],
+    "ghost": [4],
+    "visible": [4],
+    "showChevron": [4, "show-chevron"],
+    "isDropdownTrigger": [4, "is-dropdown-trigger"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-breadcrumb-item", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-breadcrumb-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BreadcrumbItem);
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { BreadcrumbItem as B, defineCustomElement as d };
+
+//# sourceMappingURL=breadcrumb-item.js.map

package/components/breadcrumb-item.js.map

@@ -0,0 +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}

package/components/breakpoints.js

@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Implementation of scss breakpoints mixins/_break-points.scss
+const mediaQueries = {
+  sm: '(max-width: 48em)',
+  md: '(min-width: 48.0625em) and (max-width: 80em)',
+  lg: '(min-width: 80.0625em)',
+};
+const matchBreakpoint = (breakpoint) => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    const mediaQuery = mediaQueries[breakpoint];
+    return window.matchMedia(mediaQuery).matches;
+  }
+  return false;
+};
+
+export { matchBreakpoint as m };
+
+//# sourceMappingURL=breakpoints.js.map

package/components/breakpoints.js.map

@@ -0,0 +1 @@
+{"file":"breakpoints.js","mappings":"AAAA;;;;;;;;AASA;AACA,MAAM,YAAY,GAAG;EACnB,EAAE,EAAE,mBAAmB;EACvB,EAAE,EAAE,8CAA8C;EAClD,EAAE,EAAE,wBAAwB;CACpB,CAAC;MAIE,eAAe,GAAG,CAAC,UAAsB;EACpD,IAAI,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,UAAU,EAAE;IAC/D,MAAM,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;IAC5C,OAAO,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;GAC9C;EACD,OAAO,KAAK,CAAC;AACf;;;;","names":[],"sources":["./src/components/utils/breakpoints.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 */\n\n// Implementation of scss breakpoints mixins/_break-points.scss\nconst mediaQueries = {\n  sm: '(max-width: 48em)',\n  md: '(min-width: 48.0625em) and (max-width: 80em)',\n  lg: '(min-width: 80.0625em)',\n} as const;\n\nexport type Breakpoint = keyof typeof mediaQueries;\n\nexport const matchBreakpoint = (breakpoint: Breakpoint) => {\n  if (typeof window !== 'undefined' && (window as any).matchMedia) {\n    const mediaQuery = mediaQueries[breakpoint];\n    return window.matchMedia(mediaQuery).matches;\n  }\n  return false;\n};\n"],"version":3}

package/components/burger-menu.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getButtonClasses } from './base-button.js';
+import { a as a11yBoolean } from './a11y.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './spinner.js';
+
+const burgerMenuCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.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}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary: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)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;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)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.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}.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)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary: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)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{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)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;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)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.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}.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)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;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)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.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}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary: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)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;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)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.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}.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)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary: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)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{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)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;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)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.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}.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)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;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)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}: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 svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--hover)}.burger-menu-button{width:40px;padding:0}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}:host(.expanded) ix-icon-button{transform:rotate(180deg)}";
+
+const BurgerMenu = /*@__PURE__*/ proxyCustomElement(class BurgerMenu extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ixAriaLabel = 'Expand';
+    this.expanded = false;
+    this.pinned = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.expanded,
+      } }, this.pinned ? (h("ix-icon-button", { icon: 'double-chevron-right', ghost: true })) : (h("button", { class: Object.assign(Object.assign({}, getButtonClasses('secondary', false, true, true, false, false, false)), { 'burger-menu-button': true }), type: "button", "aria-label": this.ixAriaLabel ? this.ixAriaLabel : null, "aria-pressed": a11yBoolean(this.expanded) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))))));
+  }
+  static get style() { return burgerMenuCss; }
+}, [1, "ix-burger-menu", {
+    "ixAriaLabel": [1, "ix-aria-label"],
+    "expanded": [516],
+    "pinned": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-burger-menu", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-burger-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BurgerMenu);
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { BurgerMenu as B, defineCustomElement as d };
+
+//# sourceMappingURL=burger-menu.js.map

package/components/burger-menu.js.map

@@ -0,0 +1 @@
+{"file":"burger-menu.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,6lcAA6lc;;MC8Btmc,UAAU;;;;;uBAIS,QAAQ;oBAKF,KAAK;kBAKxB,KAAK;;EAEtB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,MAAM,IACV,sBAAgB,IAAI,EAAE,sBAAsB,EAAE,KAAK,SAAkB,KAErE,cACE,KAAK,kCACA,gBAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,kBACxC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAExC,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,IAEX,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACR,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACR,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,CACJ,CACC,CACV,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu/burger-menu.scss?tag=ix-burger-menu&encapsulation=shadow","./src/components/menu/burger-menu.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 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$focus-bdr-width: 0.0625rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 2rem;\n  width: 2.5rem;\n  border-radius: var(--theme-btn--border-radius);\n  pointer-events: all;\n\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .line {\n    fill: var(--theme-menu-btn--color);\n    opacity: 1;\n    x: 2px;\n    transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,\n      y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n    transform-origin: center;\n  }\n}\n\n@include host-hover {\n  .burger-menu-button {\n    background-color: var(--theme-menu-btn--background--hover);\n  }\n}\n\n.burger-menu-button {\n  width: 40px;\n  padding: 0;\n}\n\n@include host-active {\n  .burger-menu-button {\n    background-color: var(--theme-menu-btn--background--active);\n  }\n}\n\n:host(.expanded) {\n  svg .line-1 {\n    opacity: 1;\n    transform: rotate(-45deg);\n    y: 11px;\n  }\n\n  svg .line-2 {\n    opacity: 0;\n    x: 9;\n  }\n\n  svg .line-3 {\n    opacity: 1;\n    transform: rotate(45deg);\n    y: 11px;\n  }\n\n  ix-icon-button {\n    transform: rotate(180deg);\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/*\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, h, Host, Prop } from '@stencil/core';\n\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-burger-menu',\n  styleUrl: './burger-menu.scss',\n  shadow: true,\n})\nexport class BurgerMenu {\n  /**\n   * Accessibility label for the burger menu button (MANDATORY)\n   */\n  @Prop() ixAriaLabel: string = 'Expand';\n\n  /**\n   * Does burger menu button display the expanded or the not expanded state\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  /**\n   * Display as pinned\n   */\n  @Prop() pinned = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n        }}\n      >\n        {this.pinned ? (\n          <ix-icon-button icon={'double-chevron-right'} ghost></ix-icon-button>\n        ) : (\n          <button\n            class={{\n              ...getButtonClasses(\n                'secondary',\n                false,\n                true,\n                true,\n                false,\n                false,\n                false\n              ),\n              'burger-menu-button': true,\n            }}\n            type=\"button\"\n            aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n            aria-pressed={a11yBoolean(this.expanded)}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              height=\"24\"\n            >\n              <rect\n                class=\"line line-1\"\n                x=\"2\"\n                y=\"5\"\n                width=\"20\"\n                height=\"2\"\n              ></rect>\n              <rect\n                class=\"line line-2\"\n                x=\"2\"\n                y=\"11\"\n                width=\"13\"\n                height=\"2\"\n              ></rect>\n              <rect\n                class=\"line line-3\"\n                x=\"2\"\n                y=\"17\"\n                width=\"20\"\n                height=\"2\"\n              ></rect>\n            </svg>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/button.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+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 Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'primary';
+    this.outline = false;
+    this.ghost = false;
+    this.disabled = false;
+    this.type = 'button';
+    this.loading = false;
+    this.icon = undefined;
+    this.alignment = 'center';
+    this.iconSize = '24';
+  }
+  componentDidLoad() {
+    if (this.type === 'submit') {
+      const submitButton = document.createElement('button');
+      submitButton.style.display = 'none';
+      submitButton.type = 'submit';
+      submitButton.tabIndex = -1;
+      this.hostElement.appendChild(submitButton);
+      this.submitButtonElement = submitButton;
+    }
+  }
+  dispatchFormEvents() {
+    if (this.type === 'submit' && this.submitButtonElement) {
+      this.submitButtonElement.click();
+    }
+  }
+  render() {
+    const baseButtonProps = {
+      variant: this.variant,
+      outline: this.outline,
+      ghost: this.ghost,
+      iconOnly: false,
+      iconOval: false,
+      selected: false,
+      disabled: this.disabled || this.loading,
+      icon: this.icon,
+      iconSize: this.iconSize,
+      loading: this.loading,
+      onClick: () => this.dispatchFormEvents(),
+      type: this.type,
+      alignment: this.alignment,
+    };
+    return (h(Host, { class: {
+        disabled: this.disabled || this.loading,
+      } }, h(BaseButton, Object.assign({}, baseButtonProps), h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return buttonCss; }
+}, [1, "ix-button", {
+    "variant": [1],
+    "outline": [4],
+    "ghost": [4],
+    "disabled": [516],
+    "type": [1],
+    "loading": [4],
+    "icon": [1],
+    "alignment": [1],
+    "iconSize": [1, "icon-size"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Button);
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Button as B, defineCustomElement as d };
+
+//# sourceMappingURL=button.js.map