@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/esm/ix-toggle-button.entry.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-eb0be730.js';
+import { B as BaseButton } from './base-button-87048318.js';
+import { a as a11yBoolean } from './a11y-aa83c2d1.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"]
+  }; }
+};
+ToggleButton.style = toggleButtonCss;
+
+export { ToggleButton as ix_toggle_button };
+
+//# sourceMappingURL=ix-toggle-button.entry.js.map

package/dist/esm/ix-toggle-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-toggle-button.entry.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/esm/ix-toggle.entry.js

@@ -1,55 +1,36 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-eb0be730.js';
+import { a as a11yBoolean } from './a11y-aa83c2d1.js';
 
-const toggleCss = ".sc-ix-toggle-h{display:flex;align-items:center;outline:none}.sc-ix-toggle-h .switch.sc-ix-toggle{position:relative;display:inline-flex;align-items:center;min-width:3rem;height:2rem}.sc-ix-toggle-h .switch.sc-ix-toggle:not(.disabled):not(:disabled):focus-visible{outline-color:var(--focus--border-color);outline-style:solid;outline-width:1px}.sc-ix-toggle-h .switch.sc-ix-toggle input.sc-ix-toggle{opacity:0;width:0;height:0}.sc-ix-toggle-h .slider.sc-ix-toggle{display:flex;align-items:center;justify-content:center;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0}.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background);border-radius:2.125rem;border:1px solid var(--theme-switch-off--border-color);width:2.5rem;height:1rem}.sc-ix-toggle-h .slider.sc-ix-toggle:before{position:absolute;content:\"\";height:1.5rem;width:1.5rem;left:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:transform 150ms;border-radius:50%;border:1px solid var(--theme-switch-thumb-off--border-color);box-shadow:var(--theme-switch-thumb--box-shadow)}.sc-ix-toggle-h input.sc-ix-toggle:checked+.slider.sc-ix-toggle:before{transform:translateX(1.125rem);left:0.25rem}.sc-ix-toggle-h .text.sc-ix-toggle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-switch--color);padding:0 0.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--hover);border-color:var(--theme-switch-thumb-off--border-color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--active);border-color:var(--theme-switch-thumb-off--border-color--active)}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.checked.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background);border-color:var(--theme-switch-thumb-on--border-color)}.checked.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}.checked.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background--hover);border-color:var(--theme-switch-thumb-on--border-color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background--active);border-color:var(--theme-switch-thumb-on--border-color--active)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background);border-color:var(--theme-switch-thumb-mixed--border-color)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background);border-color:var(--theme-switch-mixed--border-color)}.indeterminate.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background--hover);border-color:var(--theme-switch-thumb-mixed--border-color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background--hover);border-color:var(--theme-switch-mixed--border-color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background--active);border-color:var(--theme-switch-thumb-mixed--border-color--active)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background--active);border-color:var(--theme-switch-mixed--border-color--active)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle:before{transform:translateX(0.625rem)}.disabled.sc-ix-toggle-h{pointer-events:none}.disabled.sc-ix-toggle-h .slider.sc-ix-toggle{cursor:initial;opacity:0.5}.disabled.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--disabled);border-color:var(--theme-switch-thumb-off--border-color--disabled)}.disabled.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--disabled);border-color:var(--theme-switch-off--border-color--disabled)}.disabled.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color--disabled)}";
+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 CuiToggle = class {
+const Toggle = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.checkedChange = createEvent(this, "checkedChange", 7);
     this.checked = false;
     this.disabled = false;
     this.indeterminate = false;
-    this.color = 'accent';
     this.textOn = 'On';
     this.textOff = 'Off';
     this.textIndeterminate = 'Mixed';
     this.hideText = false;
   }
-  async onKeyDown(event) {
-    const targetElement = event.target;
-    if (!this.hostElement.contains(targetElement)) {
-      return;
+  onCheckedChange(newChecked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
     }
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      this.emitChange(event);
-    }
-  }
-  emitChange(event) {
-    if (this.disabled || this.indeterminate) {
-      return;
-    }
-    event.stopPropagation();
-    event.preventDefault();
-    this.checked = !this.checked;
+    this.checked = newChecked;
     this.checkedChange.emit(this.checked);
   }
-  getText() {
-    if (this.indeterminate || this.checked === undefined) {
-      return this.textIndeterminate;
-    }
-    return this.checked ? this.textOn : this.textOff;
-  }
   render() {
     return (h(Host, { class: {
         disabled: this.disabled,
-        checked: this.checked,
-        indeterminate: this.indeterminate || this.checked === undefined,
-      } }, h("label", { class: "switch", tabindex: this.disabled ? -1 : 0 }, h("input", { tabindex: "-1", type: "checkbox", checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate || this.checked === undefined, id: this.hostElement.id, onChange: (e) => this.emitChange(e) }), h("span", { class: "slider" }, h("span", { class: "slider-track" }))), !this.hideText ? (h("span", { title: this.getText(), class: "text", onClick: (e) => this.emitChange(e) }, this.getText())) : null));
+      }, 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 getElement(this); }
 };
-CuiToggle.style = toggleCss;
+Toggle.style = toggleCss;
 
-export { CuiToggle as ix_toggle };
+export { Toggle as ix_toggle };
 
 //# sourceMappingURL=ix-toggle.entry.js.map

package/dist/esm/ix-toggle.entry.js.map

@@ -1 +1 @@
-{"file":"ix-toggle.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,klNAAklN;;MCyBvlN,SAAS;;;;mBAI8B,KAAK;oBAKpC,KAAK;yBAKA,KAAK;iBAMb,QAAQ;kBAKP,IAAI;mBAKH,KAAK;6BAKK,OAAO;oBAKhB,KAAK;;EAUxB,MAAM,SAAS,CAAC,KAAoB;IAClC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAC;IAElD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;MAC7C,OAAO;KACR;IAED,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE;MAC1D,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxB;GACF;EAEO,UAAU,CAAC,KAAY;IAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE;MACvC,OAAO;KACR;IAED,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IAEvB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACvC;EAEO,OAAO;IACb,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;MACpD,OAAO,IAAI,CAAC,iBAAiB,CAAC;KAC/B;IAED,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;GAClD;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;OAChE,IAED,aAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IACpD,aACE,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAC/D,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,EACvB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GACnC,EACF,YAAM,KAAK,EAAC,QAAQ,IAClB,YAAM,KAAK,EAAC,cAAc,GAAQ,CAC7B,CACD,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,YACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,EACrB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAEjC,IAAI,CAAC,OAAO,EAAE,CACV,IACL,IAAI,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=scoped","./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 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n@mixin toggle($state, $suffix: '') {\n  .slider {\n    &:before {\n      background-color: var(\n        --theme-switch-thumb-#{$state}--background#{$suffix}\n      );\n      border-color: var(--theme-switch-thumb-#{$state}--border-color#{$suffix});\n    }\n\n    .slider-track {\n      background-color: var(--theme-switch-#{$state}--background#{$suffix});\n      border-color: var(--theme-switch-#{$state}--border-color#{$suffix});\n    }\n  }\n\n  .text {\n    color: var(--theme-switch--color);\n  }\n\n  @include hover {\n    .slider {\n      &:before {\n        background-color: var(\n          --theme-switch-thumb-#{$state}--background--hover#{$suffix}\n        );\n        border-color: var(\n          --theme-switch-thumb-#{$state}--border-color--hover#{$suffix}\n        );\n      }\n\n      .slider-track {\n        background-color: var(\n          --theme-switch-#{$state}--background--hover#{$suffix}\n        );\n        border-color: var(\n          --theme-switch-#{$state}--border-color--hover#{$suffix}\n        );\n      }\n    }\n\n    .text {\n      color: var(--theme-switch--color--hover);\n    }\n  }\n\n  @include active {\n    .slider:before {\n      background-color: var(\n        --theme-switch-thumb-#{$state}--background--active#{$suffix}\n      );\n      border-color: var(\n        --theme-switch-thumb-#{$state}--border-color--active#{$suffix}\n      );\n    }\n\n    .slider-track {\n      background-color: var(\n        --theme-switch-#{$state}--background--active#{$suffix}\n      );\n      border-color: var(\n        --theme-switch-#{$state}--border-color--active#{$suffix}\n      );\n    }\n\n    .text {\n      color: var(--theme-switch--color--active);\n    }\n  }\n}\n\n:host {\n  $slide-toggle-width: 3rem;\n  display: flex;\n  align-items: center;\n  outline: none;\n\n  .switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    min-width: $slide-toggle-width;\n    height: $default-control-height;\n\n    @include focus-visible {\n      outline-color: var(--focus--border-color);\n      outline-style: solid;\n      outline-width: 1px;\n    }\n  }\n\n  .switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .slider {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    .slider-track {\n      background-color: var(--theme-switch-off--background);\n      border-radius: 2.125rem;\n      border: 1px solid var(--theme-switch-off--border-color);\n      width: 2.5rem;\n      height: $default-space;\n    }\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 1.5rem;\n    width: 1.5rem;\n    left: 0.125rem;\n    background-color: var(--theme-switch-thumb-off--background);\n    -webkit-transition: transform $default-time;\n    transition: transform $default-time;\n    border-radius: 50%;\n    border: 1px solid var(--theme-switch-thumb-off--border-color);\n    box-shadow: var(--theme-switch-thumb--box-shadow);\n  }\n\n  input:checked + .slider:before {\n    -webkit-transform: translateX(1.125rem);\n    -ms-transform: translateX(1.125rem);\n    transform: translateX(1.125rem);\n    left: $tiny-space;\n  }\n\n  .text {\n    @include ellipsis;\n\n    color: var(--theme-switch--color);\n    padding: 0 $small-space;\n    position: relative;\n    user-select: none;\n  }\n\n  @include hover {\n    .slider:before {\n      background-color: var(--theme-switch-thumb-off--background--hover);\n      border-color: var(--theme-switch-thumb-off--border-color--hover);\n    }\n\n    .slider-track {\n      background-color: var(--theme-switch-off--background--hover);\n      border-color: var(--theme-switch-off--border-color--hover);\n    }\n\n    .text {\n      color: var(--theme-switch--color--hover);\n    }\n  }\n\n  @include active {\n    .slider:before {\n      background-color: var(--theme-switch-thumb-off--background--active);\n      border-color: var(--theme-switch-thumb-off--border-color--active);\n    }\n\n    .slider-track {\n      background-color: var(--theme-switch-off--background--active);\n      border-color: var(--theme-switch-off--border-color--active);\n    }\n\n    .text {\n      color: var(--theme-switch--color--active);\n    }\n  }\n\n  &.checked {\n    @include toggle('on');\n  }\n\n  &.indeterminate {\n    @include toggle('mixed');\n\n    .slider:before {\n      transform: translateX(0.625rem);\n    }\n  }\n\n  &.disabled {\n    pointer-events: none;\n    .slider {\n      cursor: initial;\n      opacity: 0.5;\n\n      &:before {\n        background-color: var(--theme-switch-thumb-off--background--disabled);\n        border-color: var(--theme-switch-thumb-off--border-color--disabled);\n      }\n\n      .slider-track {\n        background-color: var(--theme-switch-off--background--disabled);\n        border-color: var(--theme-switch-off--border-color--disabled);\n      }\n    }\n\n    .text {\n      color: var(--theme-switch--color--disabled);\n    }\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  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  scoped: true,\n})\nexport class CuiToggle {\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() indeterminate = false;\n\n  /**\n   * Basic and status colors from color palette\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() color = 'accent';\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  @Element() hostElement!: HTMLIxToggleElement;\n\n  @Listen('keydown', { target: 'window' })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      this.emitChange(event);\n    }\n  }\n\n  private emitChange(event: Event) {\n    if (this.disabled || this.indeterminate) {\n      return;\n    }\n\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.checked = !this.checked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  private getText() {\n    if (this.indeterminate || this.checked === undefined) {\n      return this.textIndeterminate;\n    }\n\n    return this.checked ? this.textOn : this.textOff;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n          indeterminate: this.indeterminate || this.checked === undefined,\n        }}\n      >\n        <label class=\"switch\" tabindex={this.disabled ? -1 : 0}>\n          <input\n            tabindex=\"-1\"\n            type=\"checkbox\"\n            checked={this.checked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate || this.checked === undefined}\n            id={this.hostElement.id}\n            onChange={(e) => this.emitChange(e)}\n          />\n          <span class=\"slider\">\n            <span class=\"slider-track\"></span>\n          </span>\n        </label>\n        {!this.hideText ? (\n          <span\n            title={this.getText()}\n            class=\"text\"\n            onClick={(e) => this.emitChange(e)}\n          >\n            {this.getText()}\n          </span>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-toggle.entry.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/esm/ix-tooltip.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
-import { a as autoUpdate, c as computePosition, s as shift, o as offset, b as arrow, f as flip } from './floating-ui.dom.esm-3130eda0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { a as autoUpdate, c as computePosition, s as shift, o as offset, b as arrow, f as flip } from './floating-ui.dom.esm-cbe44820.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)}";
 

package/dist/esm/ix-tree_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eb0be730.js';
 import { c as createCommonjsModule, g as getDefaultExportFromCjs, a as commonjsRequire } from './_commonjsHelpers-4bc7200a.js';
 import { r as renderDefaultItem } from './default-tree-item-91ff2c08.js';
 
@@ -504,7 +504,7 @@ module.exports = exports['default'];
 
 const Hyperlist = /*@__PURE__*/getDefaultExportFromCjs(hyperlist);
 
-const treeCss = ".sc-ix-tree-h{display:block}";
+const treeCss = ":host{display:block}";
 
 const Tree = class {
   constructor(hostRef) {
@@ -522,6 +522,9 @@ const Tree = class {
     this.renderItem = undefined;
     this.context = {};
   }
+  updatePadding(element, item) {
+    element.style.paddingLeft = item.level + 'rem';
+  }
   getVirtualizerOptions() {
     const list = this.buildTreeList(this.model[this.root]);
     let setToggleListener = (item, el, index) => {
@@ -543,7 +546,7 @@ const Tree = class {
       total: list.length,
       generate: (index) => {
         const item = list[index];
-        const renderedTreeItem = this.host.querySelector(`[data-tree-node-id="${item.id}"]`);
+        const renderedTreeItem = this.hostElement.querySelector(`[data-tree-node-id="${item.id}"]`);
         const context = this.getContext(item.id);
         if (renderedTreeItem) {
           renderedTreeItem.hasChildren = item.hasChildren;
@@ -553,6 +556,7 @@ const Tree = class {
             const doUpdate = this.updates.get(item.id);
             doUpdate(item, Object.assign({}, this.context));
           }
+          this.updatePadding(renderedTreeItem, item);
           return renderedTreeItem;
         }
         const update = (callback) => {
@@ -567,8 +571,8 @@ const Tree = class {
         }
         const el = innerElement;
         el.setAttribute('data-tree-node-id', item.id);
-        el.style.paddingLeft = item.level + 'rem';
         el.style.paddingRight = '1rem';
+        this.updatePadding(el, item);
         if (!this.itemClickListener.has(el)) {
           const itemClickCallback = (e) => {
             e.preventDefault();
@@ -636,7 +640,7 @@ const Tree = class {
       });
       this.nodeRemoved.emit(removed);
     });
-    this.observer.observe(this.host, {
+    this.observer.observe(this.hostElement, {
       childList: true,
     });
   }
@@ -667,26 +671,29 @@ const Tree = class {
   }
   refreshList() {
     if (this.hyperlist) {
-      this.hyperlist.refresh(this.host, this.getVirtualizerOptions());
+      this.hyperlist.refresh(this.hostElement, this.getVirtualizerOptions());
     }
   }
   initList() {
     var _a;
+    if (!this.model) {
+      return;
+    }
     (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
     const config = this.getVirtualizerOptions();
-    this.hyperlist = new Hyperlist(this.host, config);
+    this.hyperlist = new Hyperlist(this.hostElement, config);
   }
   render() {
     return (h(Host, null, h("slot", null)));
   }
-  get host() { return getElement(this); }
+  get hostElement() { return getElement(this); }
   static get watchers() { return {
     "model": ["modelChange"]
   }; }
 };
 Tree.style = treeCss;
 
-const treeItemCss = ".sc-ix-tree-item-h{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected).hover,.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected):hover{background-color:var(--theme-tree-item--background--hover)}.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected).active,.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected):active{background-color:var(--theme-tree-item--background--active)}.selected.sc-ix-tree-item-h{background-color:var(--theme-tree-item--background--selected)}.selected.hover.sc-ix-tree-item-h,.selected.sc-ix-tree-item-h:hover{background-color:var(--theme-tree-item--background--selected-hover)}.selected.active.sc-ix-tree-item-h,.selected.sc-ix-tree-item-h:active{background-color:var(--theme-tree-item--background--selected-active)}.sc-ix-tree-item-h .tree-node-container.sc-ix-tree-item{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item ix-icon.sc-ix-tree-item{transition:transform 150ms ease-in-out}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item ix-icon.icon-toggle-down.sc-ix-tree-item{transform:rotate(90deg)}";
+const treeItemCss = ":host{display:flex;align-items:center;height:32px;width:100%;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 .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}:host .icon-toggle-container ix-icon{transition:transform 150ms ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";
 
 const TreeItem = class {
   constructor(hostRef) {