@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/components/ix-split-button-item.js.map

@@ -1 +0,0 @@
-{"file":"ix-split-button-item.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,yBAAyB;;MCuBvC,eAAe;;;;;;;;;EAkB1B,MAAM;IACJ,QACE,wBACE,eAAe,QACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=shadow","./src/components/split-button-item/split-button-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:host {\n  display: contents;\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  h,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-split-button-item',\n  styleUrl: 'split-button-item.css',\n  shadow: true,\n})\nexport class SplitButtonItem {\n  /**\n   * Dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        suppressChecked\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-split-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxSplitButton extends Components.IxSplitButton, HTMLElement {}
-export const IxSplitButton: {
-  prototype: IxSplitButton;
-  new (): IxSplitButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-split-button.js

@@ -1,107 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$6 } from './button.js';
-import { d as defineCustomElement$5 } from './dropdown.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './spinner.js';
-
-const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
-
-const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.buttonClick = createEvent(this, "buttonClick", 7);
-    this.variant = 'primary';
-    this.outline = false;
-    this.ghost = false;
-    this.label = undefined;
-    this.icon = '';
-    this.splitIcon = 'context-menu';
-    this.disabled = false;
-    this.placement = 'bottom-start';
-    this.toggle = false;
-  }
-  get splitItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-split-button-item'));
-  }
-  linkTriggerRef() {
-    if (this.triggerElement && this.dropdownElement) {
-      this.dropdownElement.trigger = this.triggerElement;
-    }
-  }
-  componentDidLoad() {
-    this.linkTriggerRef();
-  }
-  render() {
-    const buttonAttributes = {
-      variant: this.variant,
-      outline: this.outline,
-      ghost: this.ghost,
-      disabled: this.disabled,
-      class: {
-        'left-button-border': !this.outline,
-      },
-      onClick: (e) => this.buttonClick.emit(e),
-    };
-    return (h(Host, null, h("div", { class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon }))), h("ix-icon-button", Object.assign({}, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null))));
-  }
-  get hostElement() { return this; }
-  static get style() { return splitButtonCss; }
-}, [1, "ix-split-button", {
-    "variant": [1],
-    "outline": [4],
-    "ghost": [4],
-    "label": [1],
-    "icon": [1],
-    "splitIcon": [1, "split-icon"],
-    "disabled": [4],
-    "placement": [1],
-    "toggle": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-split-button", "ix-button", "ix-dropdown", "ix-icon", "ix-icon-button", "ix-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-split-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SplitButton);
-      }
-      break;
-    case "ix-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxSplitButton = SplitButton;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxSplitButton, defineCustomElement };
-
-//# sourceMappingURL=ix-split-button.js.map

package/dist/components/ix-split-button.js.map

@@ -1 +0,0 @@
-{"file":"ix-split-button.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,qvBAAqvB;;MC6B/vB,WAAW;;;;;;mBAMgB,SAAS;mBAK7B,KAAK;iBAKP,KAAK;;gBAUN,EAAE;qBAKG,cAAc;oBAKf,KAAK;qBAKc,cAAc;kBAElC,KAAK;;EAUvB,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAC1D,CAAC;GACH;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;MAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,KAAK,EAAE;QACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;OACpC;MACD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;KACzC,CAAC;IACF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAC3D,IAAI,CAAC,KAAK,IACT,iCAAe,gBAAgB,IAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAC7C,IAAI,CAAC,KAAK,CACD,KAEZ,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,IACC,CACnB,EACD,sCACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd,EAEN,mBAAa,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IACjD,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  get splitItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-split-button-item')\n    );\n  }\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n      onClick: (e) => this.buttonClick.emit(e),\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button {...buttonAttributes} icon={this.icon}>\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-tab-item.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxTabItem extends Components.IxTabItem, HTMLElement {}
-export const IxTabItem: {
-  prototype: IxTabItem;
-  new (): IxTabItem;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-tab-item.js

@@ -1,8 +0,0 @@
-import { T as TabItem, d as defineCustomElement$1 } from './tab-item.js';
-
-const IxTabItem = TabItem;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxTabItem, defineCustomElement };
-
-//# sourceMappingURL=ix-tab-item.js.map

package/dist/components/ix-tab-item.js.map

@@ -1 +0,0 @@
-{"file":"ix-tab-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-tabs.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxTabs extends Components.IxTabs, HTMLElement {}
-export const IxTabs: {
-  prototype: IxTabs;
-  new (): IxTabs;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-tabs.js

@@ -1,8 +0,0 @@
-import { T as Tabs, d as defineCustomElement$1 } from './tabs.js';
-
-const IxTabs = Tabs;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxTabs, defineCustomElement };
-
-//# sourceMappingURL=ix-tabs.js.map

package/dist/components/ix-tabs.js.map

@@ -1 +0,0 @@
-{"file":"ix-tabs.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-tile.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxTile extends Components.IxTile, HTMLElement {}
-export const IxTile: {
-  prototype: IxTile;
-  new (): IxTile;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-tile.js

@@ -1,59 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const tileCss = ":host{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .tile-header{display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{-webkit-border-before:1px solid var(--theme-color-1);border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";
-
-const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = 'medium';
-    this.hasHeaderSlot = false;
-    this.hasFooterSlot = false;
-  }
-  handleHeaderSlotChange() {
-    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot="header"]');
-  }
-  handleFooterSlotChange() {
-    this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
-  }
-  render() {
-    return (h(Host, { class: {
-        'tile-small': this.size === 'small',
-        'tile-medium': this.size === 'medium',
-        'tile-big': this.size === 'big',
-      } }, h("div", { class: {
-        'tile-header': true,
-        'has-content': this.hasHeaderSlot,
-      } }, h("slot", { name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { class: "tile-subheader" }, h("slot", { name: "subheader" })), h("div", { class: "tile-content" }, h("slot", null)), h("div", { class: {
-        'tile-footer': true,
-        'has-content': this.hasFooterSlot,
-      } }, h("slot", { name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
-  }
-  get hostElement() { return this; }
-  static get style() { return tileCss; }
-}, [1, "ix-tile", {
-    "size": [1],
-    "hasHeaderSlot": [32],
-    "hasFooterSlot": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-tile"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-tile":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tile);
-      }
-      break;
-  } });
-}
-
-const IxTile = Tile;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxTile, defineCustomElement };
-
-//# sourceMappingURL=ix-tile.js.map

package/dist/components/ix-tile.js.map

@@ -1 +0,0 @@
-{"file":"ix-tile.js","mappings":";;AAAA,MAAM,OAAO,GAAG,41CAA41C;;MCgB/1C,IAAI;;;;;gBAM4B,QAAQ;yBAEjB,KAAK;yBACL,KAAK;;EAEvC,sBAAsB;IACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GAC1E;EAED,sBAAsB;IACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GAC1E;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;OAChC,IAED,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,IAAI,CAAC,aAAa;OAClC,IAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,EACN,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,cAAc,IACvB,eAAa,CACT,EACN,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,IAAI,CAAC,aAAa;OAClC,IAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tile/tile.scss?tag=ix-tile&encapsulation=shadow","./src/components/tile/tile.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/fonts';\n\n@mixin set-height($height) {\n  height: $height;\n  min-height: $height;\n  max-height: $height;\n}\n\n$heightSmall: 2.5rem;\n$heightMedium: 5rem;\n$heightBig: 10rem;\n$width: 11.937rem;\n\n:host {\n  @include ix-component;\n\n  min-width: $width;\n  max-width: $width;\n  width: $width;\n\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--theme-tile--border);\n  border-radius: var(--theme-tile--border-radius);\n\n  background-color: var(--theme-color-2);\n  color: var(--theme-color-std-text);\n  box-shadow: var(--theme-tile--box-shadow);\n\n  // @each $key, $value in $color-map-status {\n  //   &.tile-#{$key} {\n  //     background-color: #{$value};\n  //     color: automatic-text-color($value, 65);\n  //   }\n  // }\n\n  .tile-header {\n    display: flex;\n    align-items: center;\n\n    @include text-l-title;\n  }\n\n  .tile-header,\n  .tile-subheader,\n  .tile-content,\n  .tile-footer {\n    padding: 0 $default-space;\n  }\n\n  .tile-header,\n  .tile-content {\n    flex-grow: 1;\n  }\n\n  .tile-header.has-content {\n    display: flex;\n    height: $large-control-height;\n    max-height: $large-control-height;\n    padding-inline-end: $small-space;\n  }\n\n  .tile-subheader {\n    color: var(--theme-btn-invisible-secondary--color);\n    flex-grow: 0;\n  }\n\n  .tile-footer.has-content {\n    border-block-start: 1px solid var(--theme-color-1);\n    height: $large-control-height;\n  }\n}\n\n:host(.tile-small) {\n  @include set-height($heightSmall);\n}\n\n:host(.tile-medium) {\n  @include set-height($heightMedium);\n}\n\n:host(.tile-big) {\n  @include set-height($heightBig);\n}\n\n:host(:active),\n:host(:focus-visible),\n:host(:visited) {\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  shadow: true,\n})\nexport class Tile {\n  @Element() hostElement: HTMLIxTileElement;\n\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  @State() hasHeaderSlot: boolean = false;\n  @State() hasFooterSlot: boolean = false;\n\n  handleHeaderSlotChange() {\n    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n  }\n\n  handleFooterSlotChange() {\n    this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div\n          class={{\n            'tile-header': true,\n            'has-content': this.hasHeaderSlot,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => this.handleHeaderSlotChange()}\n          ></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            'tile-footer': true,\n            'has-content': this.hasFooterSlot,\n          }}\n        >\n          <slot\n            name=\"footer\"\n            onSlotchange={() => this.handleFooterSlotChange()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-time-picker.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxTimePicker extends Components.IxTimePicker, HTMLElement {}
-export const IxTimePicker: {
-  prototype: IxTimePicker;
-  new (): IxTimePicker;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-time-picker.js

@@ -1,8 +0,0 @@
-import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
-
-const IxTimePicker = TimePicker;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxTimePicker, defineCustomElement };
-
-//# sourceMappingURL=ix-time-picker.js.map

package/dist/components/ix-time-picker.js.map

@@ -1 +0,0 @@
-{"file":"ix-time-picker.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-toast-container.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxToastContainer extends Components.IxToastContainer, HTMLElement {}
-export const IxToastContainer: {
-  prototype: IxToastContainer;
-  new (): IxToastContainer;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-toast-container.js

@@ -1,121 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { T as TypedEvent } from './typed-event.js';
-import { d as defineCustomElement$5 } from './icon.js';
-import { d as defineCustomElement$4 } from './icon-button.js';
-import { d as defineCustomElement$3 } from './spinner.js';
-import { d as defineCustomElement$2 } from './toast.js';
-
-const ToastContainer = /*@__PURE__*/ proxyCustomElement(class ToastContainer extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.PREFIX_POSITION_CLASS = 'toast-container--';
-    this.containerId = 'toast-container';
-    this.containerClass = 'toast-container';
-    this.position = 'bottom-right';
-  }
-  get hostContainer() {
-    return document.getElementById(this.containerId);
-  }
-  componentDidLoad() {
-    if (!document.getElementById(this.containerId)) {
-      const toastContainer = document.createElement('div');
-      toastContainer.id = this.containerId;
-      toastContainer.classList.add(this.containerClass);
-      toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${this.position}`);
-      document.body.appendChild(toastContainer);
-    }
-  }
-  onPositionChange(newPosition, oldPosition) {
-    const toastContainer = document.getElementById(this.containerId);
-    toastContainer.classList.remove(`${this.PREFIX_POSITION_CLASS}${oldPosition}`);
-    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);
-  }
-  /**
-   * Display a toast message
-   * @param config
-   */
-  async showToast(config) {
-    const toast = document.createElement('ix-toast');
-    const onClose = new TypedEvent();
-    function removeToast(result) {
-      toast.remove();
-      onClose.emit(result);
-    }
-    toast.toastTitle = config.title;
-    toast.type = config.type;
-    toast.autoClose = config.autoClose;
-    toast.autoCloseDelay = config.autoCloseDelay;
-    toast.icon = config.icon;
-    toast.iconColor = config.iconColor;
-    toast.addEventListener('closeToast', (event) => {
-      const { detail } = event;
-      removeToast(detail);
-    });
-    if (typeof config.message === 'string') {
-      toast.innerText = config.message;
-    }
-    else {
-      toast.appendChild(config.message);
-    }
-    this.hostContainer.appendChild(toast);
-    return {
-      onClose,
-      close: (result) => {
-        removeToast(result);
-      },
-    };
-  }
-  render() {
-    return h(Host, null);
-  }
-  static get watchers() { return {
-    "position": ["onPositionChange"]
-  }; }
-}, [1, "ix-toast-container", {
-    "containerId": [1, "container-id"],
-    "containerClass": [1, "container-class"],
-    "position": [1],
-    "showToast": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-toast-container", "ix-icon", "ix-icon-button", "ix-spinner", "ix-toast"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-toast-container":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ToastContainer);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-toast":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxToastContainer = ToastContainer;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxToastContainer, defineCustomElement };
-
-//# sourceMappingURL=ix-toast-container.js.map

package/dist/components/ix-toast-container.js.map

@@ -1 +0,0 @@
-{"file":"ix-toast-container.js","mappings":";;;;;;;MAiBa,cAAc;;;;;IAaR,0BAAqB,GAAG,mBAAmB,CAAC;uBAVvC,iBAAiB;0BAId,iBAAiB;oBAIO,cAAc;;EAI/D,IAAI,aAAa;IACf,OAAO,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAClD;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;MAC9C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MACrD,cAAc,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MACrC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;MAClD,cAAc,CAAC,SAAS,CAAC,GAAG,CAC1B,GAAG,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAChD,CAAC;MACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;KAC3C;GACF;EAGD,gBAAgB,CAAC,WAAmB,EAAE,WAAmB;IACvD,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACjE,cAAc,CAAC,SAAS,CAAC,MAAM,CAC7B,GAAG,IAAI,CAAC,qBAAqB,GAAG,WAAW,EAAE,CAC9C,CAAC;IACF,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,qBAAqB,GAAG,WAAW,EAAE,CAAC,CAAC;GAC7E;;;;;EAOD,MAAM,SAAS,CAAC,MAAmB;IACjC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,IAAI,UAAU,EAAmB,CAAC;IAElD,SAAS,WAAW,CAAC,MAAY;MAC/B,KAAK,CAAC,MAAM,EAAE,CAAC;MACf,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACtB;IAED,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;IAChC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IACzB,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;IACnC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;IAC7C,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IACzB,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;IACnC,KAAK,CAAC,gBAAgB,CACpB,YAAY,EACZ,CAAC,KAAmC;MAClC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;MACzB,WAAW,CAAC,MAAM,CAAC,CAAC;KACrB,CACF,CAAC;IAEF,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE;MACtC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;KAClC;SAAM;MACL,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;KACnC;IAED,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAEtC,OAAO;MACL,OAAO;MACP,KAAK,EAAE,CAAC,MAAY;QAClB,WAAW,CAAC,MAAM,CAAC,CAAC;OACrB;KACF,CAAC;GACH;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/toast/toast-container.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\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast-container',\n  shadow: true,\n})\nexport class ToastContainer {\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return document.getElementById(this.containerId);\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig) {\n    const toast = document.createElement('ix-toast');\n\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose;\n    toast.autoCloseDelay = config.autoCloseDelay;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    this.hostContainer.appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/components/ix-toast.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxToast extends Components.IxToast, HTMLElement {}
-export const IxToast: {
-  prototype: IxToast;
-  new (): IxToast;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-toast.js

@@ -1,8 +0,0 @@
-import { T as Toast, d as defineCustomElement$1 } from './toast.js';
-
-const IxToast = Toast;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxToast, defineCustomElement };
-
-//# sourceMappingURL=ix-toast.js.map

package/dist/components/ix-toast.js.map

@@ -1 +0,0 @@
-{"file":"ix-toast.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-toggle.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxToggle extends Components.IxToggle, HTMLElement {}
-export const IxToggle: {
-  prototype: IxToggle;
-  new (): IxToggle;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-toggle.js

@@ -1,62 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { a as a11yBoolean } from './a11y.js';
-
-const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:150ms;border-radius:1.5rem}:host .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:150ms;border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}";
-
-const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.checkedChange = createEvent(this, "checkedChange", 7);
-    this.checked = false;
-    this.disabled = false;
-    this.indeterminate = false;
-    this.textOn = 'On';
-    this.textOff = 'Off';
-    this.textIndeterminate = 'Mixed';
-    this.hideText = false;
-  }
-  onCheckedChange(newChecked) {
-    if (this.indeterminate) {
-      this.indeterminate = false;
-    }
-    this.checked = newChecked;
-    this.checkedChange.emit(this.checked);
-  }
-  render() {
-    return (h(Host, { class: {
-        disabled: this.disabled,
-      }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { class: "switch", tabIndex: -1 }, h("span", { class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
-  }
-  get hostElement() { return this; }
-  static get style() { return toggleCss; }
-}, [1, "ix-toggle", {
-    "checked": [1540],
-    "disabled": [4],
-    "indeterminate": [1540],
-    "textOn": [1, "text-on"],
-    "textOff": [1, "text-off"],
-    "textIndeterminate": [1, "text-indeterminate"],
-    "hideText": [4, "hide-text"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-toggle"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-toggle":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Toggle);
-      }
-      break;
-  } });
-}
-
-const IxToggle = Toggle;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxToggle, defineCustomElement };
-
-//# sourceMappingURL=ix-toggle.js.map

package/dist/components/ix-toggle.js.map

@@ -1 +0,0 @@
-{"file":"ix-toggle.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,gtFAAgtF;;MC0BrtF,MAAM;;;;;;mBAMiC,KAAK;oBAKpC,KAAK;yBAKgC,KAAK;kBAK5C,IAAI;mBAKH,KAAK;6BAKK,OAAO;oBAKhB,KAAK;;EAOxB,eAAe,CAAC,UAAmB;IACjC,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElD,aACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C,EACT,aAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChC,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEP,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","./src/components/toggle/toggle.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/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-flex;\n  position: relative;\n  height: 2rem;\n  justify-content: flex-start;\n  align-items: center;\n  margin-right: 0.25rem;\n\n  cursor: pointer;\n\n  .switch {\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    min-width: 3rem;\n    max-width: 3rem;\n    height: 1.5rem;\n    margin-right: 0.25rem;\n  }\n\n  .switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--theme-switch-off--background);\n    transition: 150ms;\n    border-radius: 1.5rem;\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 18px;\n    width: 18px;\n    left: 4px;\n    bottom: 3px;\n    background-color: var(--theme-switch-thumb-off--background);\n    transition: 150ms;\n    border-radius: 50%;\n  }\n\n  input {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  input:focus-visible + .switch > .slider {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 1px;\n  }\n\n  input:checked + .switch > .slider {\n    background-color: var(--theme-switch-on--background);\n  }\n\n  input:checked + .switch > .slider::before {\n    background-color: var(--theme-switch-thumb-on--background);\n    transform: translateX(1.35rem);\n  }\n\n  // Toggle NOT checked\n  input + .switch:hover > .slider {\n    background-color: var(--theme-switch-off--background--hover);\n  }\n\n  input + .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--hover);\n  }\n\n  input + .switch:active > .slider {\n    background-color: var(--theme-switch-off--background--active);\n  }\n\n  input + .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--active);\n  }\n\n  // Toggle checked\n  input:checked + .switch:hover > .slider {\n    background-color: var(--theme-switch-on--background--hover);\n  }\n\n  input:checked + .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--hover);\n  }\n\n  input:checked + .switch:active > .slider {\n    background-color: var(--theme-switch-on--background--active);\n  }\n\n  input:checked + .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--active);\n  }\n\n  input:indeterminate + .switch > .slider::before {\n    transform: translateX(0.7rem);\n  }\n\n  .toggle-text {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  input + .switch {\n    opacity: 0.5;\n  }\n\n  input + .switch > .slider {\n    background-color: var(--theme-switch-off--background--disabled);\n  }\n\n  input + .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--disabled);\n  }\n\n  input:checked + .switch > .slider {\n    background-color: var(--theme-switch-on--background--disabled);\n  }\n\n  input:checked + .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--disabled);\n  }\n\n  .toggle-text {\n    color: var(--theme-color-weak-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n})\nexport class Toggle {\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange: EventEmitter<boolean>;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onClick={() => this.onCheckedChange(!this.checked)}\n      >\n        <input\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          role=\"switch\"\n          tabindex={0}\n          type=\"checkbox\"\n          aria-checked={a11yBoolean(this.checked)}\n          onChange={(event) =>\n            this.onCheckedChange((event.target as any).checked)\n          }\n        ></input>\n        <label class=\"switch\" tabIndex={-1}>\n          <span class=\"slider\"></span>\n        </label>\n        {!this.hideText ? (\n          <Fragment>\n            {!this.indeterminate ? (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.checked ? this.textOn : this.textOff}\n              </span>\n            ) : (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.textIndeterminate}\n              </span>\n            )}\n          </Fragment>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-tooltip.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxTooltip extends Components.IxTooltip, HTMLElement {}
-export const IxTooltip: {
-  prototype: IxTooltip;
-  new (): IxTooltip;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;