@siemens/ix 2.0.0-beta.1 → 2.0.0

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

@@ -1,111 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { B as BaseButton } from './base-button.js';
-import { a as a11yBoolean } from './a11y.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './spinner.js';
-
-const toggleButtonCss = ".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:inline-block;width:auto;height:2rem;vertical-align:middle}: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 .btn{width:100%;height:100%}:host button:not(:disabled){cursor:pointer}:host(.disabled){pointer-events:none}";
-
-const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.pressedChange = createEvent(this, "pressedChange", 7);
-    this.variant = 'secondary';
-    this.outline = false;
-    this.ghost = false;
-    this.disabled = false;
-    this.loading = false;
-    this.icon = undefined;
-    this.pressed = false;
-  }
-  isIllegalToggleButtonConfig() {
-    return this.variant === 'primary' && (this.outline || this.ghost);
-  }
-  logIllegalConfig() {
-    console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".');
-  }
-  onVariantChange() {
-    if (this.isIllegalToggleButtonConfig()) {
-      this.logIllegalConfig();
-    }
-  }
-  onGhostChange() {
-    this.onVariantChange();
-  }
-  onOutlineChange() {
-    this.onVariantChange();
-  }
-  componentDidLoad() {
-    this.onVariantChange();
-  }
-  dispatchPressedChange() {
-    this.pressedChange.emit(!this.pressed);
-  }
-  render() {
-    const baseButtonProps = {
-      variant: this.variant,
-      outline: this.outline,
-      ghost: this.ghost,
-      iconOnly: false,
-      iconOval: false,
-      selected: this.pressed,
-      disabled: this.disabled || this.loading,
-      icon: this.icon,
-      loading: this.loading,
-      onClick: () => this.dispatchPressedChange(),
-      type: 'button',
-      ariaAttributes: {
-        'aria-pressed': a11yBoolean(this.pressed),
-      },
-    };
-    return (h(Host, { class: {
-        disabled: this.disabled || this.loading,
-      } }, h(BaseButton, Object.assign({}, baseButtonProps), h("slot", null))));
-  }
-  static get watchers() { return {
-    "variant": ["onVariantChange"],
-    "ghost": ["onGhostChange"],
-    "outline": ["onOutlineChange"]
-  }; }
-  static get style() { return toggleButtonCss; }
-}, [1, "ix-toggle-button", {
-    "variant": [1],
-    "outline": [4],
-    "ghost": [4],
-    "disabled": [516],
-    "loading": [4],
-    "icon": [1],
-    "pressed": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-toggle-button", "ix-icon", "ix-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-toggle-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ToggleButton);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxToggleButton = ToggleButton;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxToggleButton, defineCustomElement };
-
-//# sourceMappingURL=ix-toggle-button.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-toggle-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,gwaAAgwa;;MC8B3wa,YAAY;;;;;;mBAKU,WAAW;mBAK1B,KAAK;iBAKP,KAAK;oBAKe,KAAK;mBAKd,KAAK;;mBAUd,KAAK;;EAOf,2BAA2B;IACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;GACnE;EAEO,gBAAgB;IACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;GACH;EAGD,eAAe;IACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;MACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;GACF;EAGD,aAAa;IACX,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAGD,eAAe;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,qBAAqB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACxC;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,OAAO;MACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;MAC3C,IAAI,EAAE,QAAQ;MACd,cAAc,EAAE;QACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;OAC1C;KACF,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;OACxC,IAED,EAAC,UAAU,oBAAK,eAAe,GAC7B,eAAa,CACF,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/toggle-button/toggle-button.scss?tag=ix-toggle-button&encapsulation=shadow","./src/components/toggle-button/toggle-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\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  width: auto;\n  height: $x-large-space;\n  vertical-align: middle;\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n\n  button:not(:disabled) {\n    cursor: pointer;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: 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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-toggle-button',\n  shadow: true,\n  styleUrl: './toggle-button.scss',\n})\nexport class ToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/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 ::-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 .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,+uGAA+uG;;MC0BpvG,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;

package/dist/components/ix-tooltip.js

@@ -1,183 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as autoUpdate, c as computePosition, s as shift, o as offset, b as arrow, f as flip } from './floating-ui.dom.esm.js';
-import { d as defineCustomElement$2 } from './typography.js';
-
-const tooltipCss = ":host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
-
-const numberToPixel = (value) => (value != null ? `${value}px` : '');
-const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.onMouseEnterBind = this.showTooltip.bind(this);
-    this.onMouseLeaveBind = this.hideTooltip.bind(this);
-    this.tooltipCloseTimeInMS = 50;
-    this.for = undefined;
-    this.titleContent = undefined;
-    this.interactive = false;
-    this.placement = 'top';
-    this.visible = false;
-  }
-  get arrowElement() {
-    return this.hostElement.shadowRoot.querySelector('.arrow');
-  }
-  destroyAutoUpdate() {
-    if (this.disposeAutoUpdate !== undefined) {
-      this.disposeAutoUpdate();
-    }
-  }
-  showTooltip(e) {
-    clearTimeout(this.hideTooltipTimeout);
-    this.visible = true;
-    this.computeTooltipPosition(e.target);
-  }
-  hideTooltip() {
-    this.hideTooltipTimeout = setTimeout(() => {
-      this.visible = false;
-    }, this.tooltipCloseTimeInMS);
-    this.destroyAutoUpdate();
-  }
-  computeArrowPosition({ placement, middlewareData, }) {
-    let { x, y } = middlewareData.arrow;
-    if (placement.startsWith('top')) {
-      return {
-        left: numberToPixel(x),
-        top: numberToPixel(y),
-      };
-    }
-    if (placement.startsWith('right')) {
-      return {
-        left: numberToPixel(-4),
-        top: numberToPixel(y),
-      };
-    }
-    if (placement.startsWith('bottom')) {
-      return {
-        left: numberToPixel(x),
-        top: numberToPixel(-4),
-      };
-    }
-    if (placement.startsWith('left')) {
-      return {
-        right: numberToPixel(-4),
-        top: numberToPixel(y),
-      };
-    }
-  }
-  async computeTooltipPosition(target) {
-    this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
-      setTimeout(async () => {
-        const computeResponse = await computePosition(target, this.hostElement, {
-          strategy: 'fixed',
-          placement: this.placement,
-          middleware: [
-            shift(),
-            offset(8),
-            arrow({
-              element: this.arrowElement,
-            }),
-            flip({
-              fallbackStrategy: 'initialPlacement',
-              padding: 10,
-            }),
-          ],
-        });
-        if (computeResponse.middlewareData.arrow) {
-          const arrowPosition = this.computeArrowPosition(computeResponse);
-          Object.assign(this.arrowElement.style, arrowPosition);
-        }
-        const { x, y } = computeResponse;
-        Object.assign(this.hostElement.style, {
-          left: x !== null ? `${x}px` : '',
-          top: y !== null ? `${y}px` : '',
-        });
-      });
-    }, {
-      ancestorResize: true,
-      ancestorScroll: true,
-      elementResize: true,
-    });
-  }
-  queryAnchorElements() {
-    return Array.from(document.querySelectorAll(this.for));
-  }
-  registerTriggerListener() {
-    const elements = this.queryAnchorElements();
-    elements.forEach((e) => {
-      e.addEventListener('mouseenter', this.onMouseEnterBind);
-      e.addEventListener('mouseleave', this.onMouseLeaveBind);
-    });
-  }
-  registerTooltipListener() {
-    this.hostElement.addEventListener('mouseenter', () => {
-      if (this.interactive) {
-        clearTimeout(this.hideTooltipTimeout);
-      }
-    });
-    this.hostElement.addEventListener('mouseleave', () => {
-      this.hideTooltip();
-    });
-  }
-  componentDidLoad() {
-    if (this.interactive) {
-      this.tooltipCloseTimeInMS = 150;
-    }
-    this.observer = new MutationObserver(() => {
-      this.registerTriggerListener();
-    });
-    this.observer.observe(document.body, {
-      attributes: true,
-      attributeFilter: ['data-ix-tooltip'],
-      childList: true,
-      subtree: true,
-    });
-    this.registerTriggerListener();
-    this.registerTooltipListener();
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-    this.destroyAutoUpdate();
-  }
-  render() {
-    const tooltipContentClass = {
-      'tooltip-content': true,
-    };
-    return (h(Host, { class: {
-        visible: this.visible,
-      } }, h("div", { class: 'tooltip-title' }, h("slot", { name: "title-icon" }), h("ix-typography", { variant: "default-title" }, this.titleContent, h("slot", { name: "title-content" }))), h("div", { class: tooltipContentClass }, h("slot", null)), h("div", { class: "arrow" })));
-  }
-  get hostElement() { return this; }
-  static get style() { return tooltipCss; }
-}, [1, "ix-tooltip", {
-    "for": [1],
-    "titleContent": [1, "title-content"],
-    "interactive": [4],
-    "placement": [1],
-    "visible": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-tooltip", "ix-typography"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-tooltip":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tooltip);
-      }
-      break;
-    case "ix-typography":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxTooltip = Tooltip;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxTooltip, defineCustomElement };
-
-//# sourceMappingURL=ix-tooltip.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-tooltip.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  z-index: var(--theme-z-index-tooltip);\n\n  max-width: 18.25rem;\n\n  opacity: 0;\n  visibility: collapse !important;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n  background-color: var(--theme-tootlip--background);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible !important;\n}\n\n:host(.visible) {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  /**\n   * Initial placement of the tooltip. If the placement don\"t have enough space,\n   * the tooltip will placed on another location.\n   *\n   * @since 1.5.0\n   */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private onMouseEnterBind = this.showTooltip.bind(this);\n  private onMouseLeaveBind = this.hideTooltip.bind(this);\n  private disposeAutoUpdate?: () => void;\n  private tooltipCloseTimeInMS = 50;\n\n  private get arrowElement() {\n    return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  private showTooltip(e: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    this.visible = true;\n    this.computeTooltipPosition(e.target);\n  }\n\n  private hideTooltip() {\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.visible = false;\n    }, this.tooltipCloseTimeInMS);\n    this.destroyAutoUpdate();\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition {\n    let { x, y } = middlewareData.arrow;\n\n    if (placement.startsWith('top')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        left: numberToPixel(-4),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(-4),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        right: numberToPixel(-4),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(target: HTMLElement) {\n    this.disposeAutoUpdate = autoUpdate(\n      target,\n      this.hostElement,\n      async () => {\n        setTimeout(async () => {\n          const computeResponse = await computePosition(\n            target,\n            this.hostElement,\n            {\n              strategy: 'fixed',\n              placement: this.placement,\n              middleware: [\n                shift(),\n                offset(8),\n                arrow({\n                  element: this.arrowElement,\n                }),\n                flip({\n                  fallbackStrategy: 'initialPlacement',\n                  padding: 10,\n                }),\n              ],\n            }\n          );\n\n          if (computeResponse.middlewareData.arrow) {\n            const arrowPosition = this.computeArrowPosition(computeResponse);\n            Object.assign(this.arrowElement.style, arrowPosition);\n          }\n\n          const { x, y } = computeResponse;\n          Object.assign(this.hostElement.style, {\n            left: x !== null ? `${x}px` : '',\n            top: y !== null ? `${y}px` : '',\n          });\n        });\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private queryAnchorElements() {\n    return Array.from(document.querySelectorAll(this.for));\n  }\n\n  private registerTriggerListener() {\n    const elements = this.queryAnchorElements();\n    elements.forEach((e) => {\n      e.addEventListener('mouseenter', this.onMouseEnterBind);\n      e.addEventListener('mouseleave', this.onMouseLeaveBind);\n    });\n  }\n\n  private registerTooltipListener() {\n    this.hostElement.addEventListener('mouseenter', () => {\n      if (this.interactive) {\n        clearTimeout(this.hideTooltipTimeout);\n      }\n    });\n    this.hostElement.addEventListener('mouseleave', () => {\n      this.hideTooltip();\n    });\n  }\n\n  componentDidLoad() {\n    if (this.interactive) {\n      this.tooltipCloseTimeInMS = 150;\n    }\n\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTriggerListener();\n    this.registerTooltipListener();\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n    this.destroyAutoUpdate();\n  }\n\n  render() {\n    const tooltipContentClass = {\n      'tooltip-content': true,\n    };\n\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={tooltipContentClass}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

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

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

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