@siemens/ix 0.0.0-pr-2155-20250919111817 → 0.0.0-pr-2155-20250923141322

package/components/ix-toggle-button.js

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CaRf_gt1.js';
-import { B as BaseButton } from './p-DrE-5lmd.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-DFHA6KvD.js';
+import { B as BaseButton } from './p-iTOaSMDo.js';
 import { a as a11yBoolean } from './p-Bb7pDeaQ.js';
-import { d as defineCustomElement$2 } from './p-B6A7qI08.js';
+import { d as defineCustomElement$2 } from './p-R9YNQy08.js';
 
-const toggleButtonCss = ":host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host .btn-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-btn-primary--background--pressed);color:var(--theme-btn-primary--color--pressed)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-hover)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-active)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover,:host .btn-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-btn-secondary--background--pressed);color:var(--theme-btn-secondary--color--pressed)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-hover)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-active)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover,:host .btn-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-tertiary,:host .btn-tertiary.focus,:host .btn-tertiary:focus-visible{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host .btn-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):hover,:host .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):active,:host .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-tertiary.disabled,:host(.disabled) .btn-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-tertiary--border-color--disabled);background-color:var(--theme-btn-tertiary--background--disabled);color:var(--theme-btn-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-tertiary--color--disabled)}:host .btn-subtle-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-primary,:host .btn-subtle-primary.focus,:host .btn-subtle-primary:focus-visible{background-color:var(--theme-btn-subtle-primary--background);color:var(--theme-btn-subtle-primary--color);--ix-button-color:var(--theme-btn-subtle-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-primary--border-color);border-style:solid}:host .btn-subtle-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-primary.selected{background-color:var(--theme-btn-subtle-primary--background--pressed);color:var(--theme-btn-subtle-primary--color--pressed)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-hover)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-active)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-primary--border-color--hover);background-color:var(--theme-btn-subtle-primary--background--hover);color:var(--theme-btn-subtle-primary--color--hover)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):active,:host .btn-subtle-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-primary--border-color--active);background-color:var(--theme-btn-subtle-primary--background--active);color:var(--theme-btn-subtle-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-primary.disabled,:host(.disabled) .btn-subtle-primary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-primary--border-color--disabled);background-color:var(--theme-btn-subtle-primary--background--disabled);color:var(--theme-btn-subtle-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-primary--color--disabled)}:host .btn-subtle-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-secondary,:host .btn-subtle-secondary.focus,:host .btn-subtle-secondary:focus-visible{background-color:var(--theme-btn-subtle-secondary--background);color:var(--theme-btn-subtle-secondary--color);--ix-button-color:var(--theme-btn-subtle-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-secondary--border-color);border-style:solid}:host .btn-subtle-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-secondary.selected{background-color:var(--theme-btn-subtle-secondary--background--pressed);color:var(--theme-btn-subtle-secondary--color--pressed)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-hover)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-active)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-secondary--border-color--hover);background-color:var(--theme-btn-subtle-secondary--background--hover);color:var(--theme-btn-subtle-secondary--color--hover)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-secondary--border-color--active);background-color:var(--theme-btn-subtle-secondary--background--active);color:var(--theme-btn-subtle-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-secondary.disabled,:host(.disabled) .btn-subtle-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-secondary--border-color--disabled);background-color:var(--theme-btn-subtle-secondary--background--disabled);color:var(--theme-btn-subtle-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-secondary--color--disabled)}:host .btn-subtle-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary,:host .btn-subtle-tertiary.focus,:host .btn-subtle-tertiary:focus-visible{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .btn-danger-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-primary,:host .btn-danger-primary.focus,:host .btn-danger-primary:focus-visible{background-color:var(--theme-btn-danger-primary--background);color:var(--theme-btn-danger-primary--color);--ix-button-color:var(--theme-btn-danger-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-primary--border-color);border-style:solid}:host .btn-danger-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-primary.selected{background-color:var(--theme-btn-danger-primary--background--pressed);color:var(--theme-btn-danger-primary--color--pressed)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-hover)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-active)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):hover,:host .btn-danger-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-primary--border-color--hover);background-color:var(--theme-btn-danger-primary--background--hover);color:var(--theme-btn-danger-primary--color--hover)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):active,:host .btn-danger-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-primary--border-color--active);background-color:var(--theme-btn-danger-primary--background--active);color:var(--theme-btn-danger-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-primary.disabled,:host(.disabled) .btn-danger-primary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-primary--border-color--disabled);background-color:var(--theme-btn-danger-primary--background--disabled);color:var(--theme-btn-danger-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-primary--color--disabled)}:host .btn-danger-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-secondary,:host .btn-danger-secondary.focus,:host .btn-danger-secondary:focus-visible{background-color:var(--theme-btn-danger-secondary--background);color:var(--theme-btn-danger-secondary--color);--ix-button-color:var(--theme-btn-danger-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-secondary--border-color);border-style:solid}:host .btn-danger-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-secondary.selected{background-color:var(--theme-btn-danger-secondary--background--pressed);color:var(--theme-btn-danger-secondary--color--pressed)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-hover)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-active)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-secondary--border-color--hover);background-color:var(--theme-btn-danger-secondary--background--hover);color:var(--theme-btn-danger-secondary--color--hover)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):active,:host .btn-danger-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-secondary--border-color--active);background-color:var(--theme-btn-danger-secondary--background--active);color:var(--theme-btn-danger-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-secondary.disabled,:host(.disabled) .btn-danger-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-secondary--border-color--disabled);background-color:var(--theme-btn-danger-secondary--background--disabled);color:var(--theme-btn-danger-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-secondary--color--disabled)}:host .btn-danger-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-tertiary,:host .btn-danger-tertiary.focus,:host .btn-danger-tertiary:focus-visible{background-color:var(--theme-btn-danger-tertiary--background);color:var(--theme-btn-danger-tertiary--color);--ix-button-color:var(--theme-btn-danger-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-tertiary--border-color);border-style:solid}:host .btn-danger-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-tertiary.selected{background-color:var(--theme-btn-danger-tertiary--background--pressed);color:var(--theme-btn-danger-tertiary--color--pressed)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-hover)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-active)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-tertiary--border-color--hover);background-color:var(--theme-btn-danger-tertiary--background--hover);color:var(--theme-btn-danger-tertiary--color--hover)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-tertiary--border-color--active);background-color:var(--theme-btn-danger-tertiary--background--active);color:var(--theme-btn-danger-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-tertiary.disabled,:host(.disabled) .btn-danger-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-tertiary--border-color--disabled);background-color:var(--theme-btn-danger-tertiary--background--disabled);color:var(--theme-btn-danger-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-tertiary--color--disabled)}:host{display:inline-block;height:2rem;width:auto;min-width:5rem;vertical-align:middle;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 toggleButtonCss = ":host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host .btn-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-btn-primary--background--pressed);color:var(--theme-btn-primary--color--pressed)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-hover)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-active)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover,:host .btn-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-btn-secondary--background--pressed);color:var(--theme-btn-secondary--color--pressed)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-hover)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-active)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover,:host .btn-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-tertiary,:host .btn-tertiary.focus,:host .btn-tertiary:focus-visible{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host .btn-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):hover,:host .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):active,:host .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-tertiary.disabled,:host(.disabled) .btn-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-tertiary--border-color--disabled);background-color:var(--theme-btn-tertiary--background--disabled);color:var(--theme-btn-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-tertiary--color--disabled)}:host .btn-subtle-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-primary,:host .btn-subtle-primary.focus,:host .btn-subtle-primary:focus-visible{background-color:var(--theme-btn-subtle-primary--background);color:var(--theme-btn-subtle-primary--color);--ix-button-color:var(--theme-btn-subtle-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-primary--border-color);border-style:solid}:host .btn-subtle-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-primary.selected{background-color:var(--theme-btn-subtle-primary--background--pressed);color:var(--theme-btn-subtle-primary--color--pressed)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-hover)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-active)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-primary--border-color--hover);background-color:var(--theme-btn-subtle-primary--background--hover);color:var(--theme-btn-subtle-primary--color--hover)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):active,:host .btn-subtle-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-primary--border-color--active);background-color:var(--theme-btn-subtle-primary--background--active);color:var(--theme-btn-subtle-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-primary.disabled,:host(.disabled) .btn-subtle-primary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-primary--border-color--disabled);background-color:var(--theme-btn-subtle-primary--background--disabled);color:var(--theme-btn-subtle-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-primary--color--disabled)}:host .btn-subtle-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-secondary,:host .btn-subtle-secondary.focus,:host .btn-subtle-secondary:focus-visible{background-color:var(--theme-btn-subtle-secondary--background);color:var(--theme-btn-subtle-secondary--color);--ix-button-color:var(--theme-btn-subtle-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-secondary--border-color);border-style:solid}:host .btn-subtle-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-secondary.selected{background-color:var(--theme-btn-subtle-secondary--background--pressed);color:var(--theme-btn-subtle-secondary--color--pressed)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-hover)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-active)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-secondary--border-color--hover);background-color:var(--theme-btn-subtle-secondary--background--hover);color:var(--theme-btn-subtle-secondary--color--hover)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-secondary--border-color--active);background-color:var(--theme-btn-subtle-secondary--background--active);color:var(--theme-btn-subtle-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-secondary.disabled,:host(.disabled) .btn-subtle-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-secondary--border-color--disabled);background-color:var(--theme-btn-subtle-secondary--background--disabled);color:var(--theme-btn-subtle-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-secondary--color--disabled)}:host .btn-subtle-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary,:host .btn-subtle-tertiary.focus,:host .btn-subtle-tertiary:focus-visible{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .btn-danger-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-primary,:host .btn-danger-primary.focus,:host .btn-danger-primary:focus-visible{background-color:var(--theme-btn-danger-primary--background);color:var(--theme-btn-danger-primary--color);--ix-button-color:var(--theme-btn-danger-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-primary--border-color);border-style:solid}:host .btn-danger-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-primary.selected{background-color:var(--theme-btn-danger-primary--background--pressed);color:var(--theme-btn-danger-primary--color--pressed)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-hover)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-active)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):hover,:host .btn-danger-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-primary--border-color--hover);background-color:var(--theme-btn-danger-primary--background--hover);color:var(--theme-btn-danger-primary--color--hover)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):active,:host .btn-danger-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-primary--border-color--active);background-color:var(--theme-btn-danger-primary--background--active);color:var(--theme-btn-danger-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-primary.disabled,:host(.disabled) .btn-danger-primary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-primary--border-color--disabled);background-color:var(--theme-btn-danger-primary--background--disabled);color:var(--theme-btn-danger-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-primary--color--disabled)}:host .btn-danger-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-secondary,:host .btn-danger-secondary.focus,:host .btn-danger-secondary:focus-visible{background-color:var(--theme-btn-danger-secondary--background);color:var(--theme-btn-danger-secondary--color);--ix-button-color:var(--theme-btn-danger-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-secondary--border-color);border-style:solid}:host .btn-danger-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-secondary.selected{background-color:var(--theme-btn-danger-secondary--background--pressed);color:var(--theme-btn-danger-secondary--color--pressed)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-hover)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-active)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-secondary--border-color--hover);background-color:var(--theme-btn-danger-secondary--background--hover);color:var(--theme-btn-danger-secondary--color--hover)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):active,:host .btn-danger-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-secondary--border-color--active);background-color:var(--theme-btn-danger-secondary--background--active);color:var(--theme-btn-danger-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-secondary.disabled,:host(.disabled) .btn-danger-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-secondary--border-color--disabled);background-color:var(--theme-btn-danger-secondary--background--disabled);color:var(--theme-btn-danger-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-secondary--color--disabled)}:host .btn-danger-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-tertiary,:host .btn-danger-tertiary.focus,:host .btn-danger-tertiary:focus-visible{background-color:var(--theme-btn-danger-tertiary--background);color:var(--theme-btn-danger-tertiary--color);--ix-button-color:var(--theme-btn-danger-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-tertiary--border-color);border-style:solid}:host .btn-danger-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-tertiary.selected{background-color:var(--theme-btn-danger-tertiary--background--pressed);color:var(--theme-btn-danger-tertiary--color--pressed)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-hover)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-active)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-tertiary--border-color--hover);background-color:var(--theme-btn-danger-tertiary--background--hover);color:var(--theme-btn-danger-tertiary--color--hover)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-tertiary--border-color--active);background-color:var(--theme-btn-danger-tertiary--background--active);color:var(--theme-btn-danger-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-tertiary.disabled,:host(.disabled) .btn-danger-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-tertiary--border-color--disabled);background-color:var(--theme-btn-danger-tertiary--background--disabled);color:var(--theme-btn-danger-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-tertiary--color--disabled)}:host{display:inline-block;height:2rem;width:auto;min-width:5rem;vertical-align:middle}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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 H {
     constructor(registerHost) {

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

@@ -1 +1 @@
-{"file":"ix-toggle-button.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,ys6BAAys6B;;MCyBpt6B,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,gBAAgB;AAEvD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAahC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAiDxB;IAlCS,qBAAqB,GAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGxC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;AACtB,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;AAC3C,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,cAAc,EAAE;AACd,gBAAA,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;gBACzC,YAAY,EAAE,IAAI,CAAC,eAAe;AACnC,aAAA;SACF;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;AACxC,aAAA,EAAA,EAED,CAAC,CAAA,UAAU,qEAAK,eAAe,CAAA,EAC7B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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@use './common-variables' as vars;\n@use './../button/button-mixin';\n@use 'mixins/shadow-dom/component';\n\n@include button-mixin.btn;\n@include button-mixin.all-btn-variants;\n\n:host {\n  display: inline-block;\n  height: vars.$x-large-space;\n  width: auto;\n  min-width: 5rem;\n  vertical-align: middle;\n\n  @include component.ix-component;\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { BaseButtonVariant } from '../button/base-button.types';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type ToggleButtonVariant = Exclude<\n  ButtonVariant,\n  `danger-${BaseButtonVariant}`\n>;\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   */\n  @Prop() variant: ToggleButtonVariant = 'subtle-primary';\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   * Icon name for the right side of the button\n   * @since 4.0.0\n   */\n  @Prop() iconRight?: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * ARIA label for the button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelButton?: string;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      iconOnly: false,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconRight: this.iconRight,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n        'aria-label': this.ariaLabelButton,\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}
+{"file":"ix-toggle-button.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,0x6BAA0x6B;;MCyBry6B,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,gBAAgB;AAEvD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAahC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAiDxB;IAlCS,qBAAqB,GAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGxC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;AACtB,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;AAC3C,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,cAAc,EAAE;AACd,gBAAA,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;gBACzC,YAAY,EAAE,IAAI,CAAC,eAAe;AACnC,aAAA;SACF;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;AACxC,aAAA,EAAA,EAED,CAAC,CAAA,UAAU,qEAAK,eAAe,CAAA,EAC7B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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@use './common-variables' as vars;\n@use './../button/button-mixin';\n@use 'mixins/shadow-dom/component';\n\n@include button-mixin.btn;\n@include button-mixin.all-btn-variants;\n\n:host {\n  display: inline-block;\n  height: vars.$x-large-space;\n  width: auto;\n  min-width: 5rem;\n  vertical-align: middle;\n\n  @include component.ix-component;\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { BaseButtonVariant } from '../button/base-button.types';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type ToggleButtonVariant = Exclude<\n  ButtonVariant,\n  `danger-${BaseButtonVariant}`\n>;\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   */\n  @Prop() variant: ToggleButtonVariant = 'subtle-primary';\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   * Icon name for the right side of the button\n   * @since 4.0.0\n   */\n  @Prop() iconRight?: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * ARIA label for the button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelButton?: string;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      iconOnly: false,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconRight: this.iconRight,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n        'aria-label': this.ariaLabelButton,\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/components/ix-toggle.js

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CaRf_gt1.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-DFHA6KvD.js';
 import { a as a11yBoolean } from './p-Bb7pDeaQ.js';
-import { H as HookValidationLifecycle } from './p-DdNjs_6j.js';
-import { d as defineCustomElement$2 } from './p-D5oUib1c.js';
+import { H as HookValidationLifecycle } from './p-BOcoAynq.js';
+import { d as defineCustomElement$2 } from './p-BrgHqrnH.js';
 
-const toggleCss = ":host{display:inline-flex;flex-direction:row;position:relative;min-height:1.5rem;max-height:calc(100% - 0.5rem);margin-block-start:0.25rem;margin-block-end:0.25rem;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 input[type=checkbox]{display:none}:host .wrapper{display:flex;align-items:flex-start;width:100%;max-height:100%}:host .label{word-break:break-word;display:block;white-space:normal;overflow:hidden;margin-block-start:0.125rem;margin-inline-start:0.5rem;min-height:1rem;margin-left:0.625rem}:host .switch{all:unset;position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem}:host .slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:0.0625rem solid transparent}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:0.125rem;bottom:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host .switch.checked>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.5rem)}:host .switch>.slider{border-color:var(--theme-switch-off--border-color)}:host .switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host .switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host .switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host .switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host .switch.checked>.slider{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}:host .switch.checked:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host .switch.checked:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host .switch.checked:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host .switch.checked:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host .switch.indeterminate>.slider::before{transform:translateX(0.75rem)}:host(:not(.disabled)) .wrapper{cursor:pointer}:host(:not(.disabled)) .switch:focus-visible>.slider{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:0.0625rem}:host(.disabled){pointer-events:none}:host(.disabled) .switch{opacity:0.5}:host(.disabled) .switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) .switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) .switch.checked>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) .switch.checked>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .label{color:var(--theme-color-weak-text)}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--info\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--info--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--info--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--info\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--info--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--info--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--info\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--info--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--info--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--info\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--info--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--info--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--info\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--info--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--info--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--info\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--info--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--info--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--info\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--info--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--info--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--info\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--info--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--info--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--info\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--info--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--info--active\n  )}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--warning\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--warning--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--warning--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--warning\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--warning--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--warning--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--warning\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--warning--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--warning--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--warning\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--warning--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--warning--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--warning\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--warning--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--warning--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--warning\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--warning--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--warning--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--warning\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--warning--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--warning--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--warning\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--warning--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--warning--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--warning\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--warning--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--warning--active\n  )}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}";
+const toggleCss = ":host{display:inline-flex;flex-direction:row;position:relative;min-height:1.5rem;max-height:calc(100% - 0.5rem);margin-block-start:0.25rem;margin-block-end:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=checkbox]{display:none}:host .wrapper{display:flex;align-items:flex-start;width:100%;max-height:100%}:host .label{word-break:break-word;display:block;white-space:normal;overflow:hidden;margin-block-start:0.125rem;margin-inline-start:0.5rem;min-height:1rem;margin-left:0.625rem}:host .switch{all:unset;position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem}:host .slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:0.0625rem solid transparent}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:0.125rem;bottom:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host .switch.checked>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.5rem)}:host .switch>.slider{border-color:var(--theme-switch-off--border-color)}:host .switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host .switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host .switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host .switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host .switch.checked>.slider{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}:host .switch.checked:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host .switch.checked:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host .switch.checked:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host .switch.checked:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host .switch.indeterminate>.slider::before{transform:translateX(0.75rem)}:host(:not(.disabled)) .wrapper{cursor:pointer}:host(:not(.disabled)) .switch:focus-visible>.slider{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:0.0625rem}:host(.disabled){pointer-events:none}:host(.disabled) .switch{opacity:0.5}:host(.disabled) .switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) .switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) .switch.checked>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) .switch.checked>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .label{color:var(--theme-color-weak-text)}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--info\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--info--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--info--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--info\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--info--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--info--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--info\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--info--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--info--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--info\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--info--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--info--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--info\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--info--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--info--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--info\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--info--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--info--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--info\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--info--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--info--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--info\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--info--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--info--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--info\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--info--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--info--active\n  )}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--warning\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--warning--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--warning--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--warning\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--warning--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--warning--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--warning\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--warning--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--warning--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--warning\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--warning--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--warning--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--warning\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--warning--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--warning--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--warning\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--warning--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--warning--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--warning\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--warning--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--warning--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--warning\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--warning--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--warning--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--warning\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--warning--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--warning--active\n  )}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}";
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG

package/components/ix-toggle.js.map

@@ -1 +1 @@
-{"file":"ix-toggle.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-flex;\n  flex-direction: row;\n  position: relative;\n  min-height: 1.5rem;\n  max-height: calc(100% - 0.5rem);\n  margin-block-start: 0.25rem;\n  margin-block-end: 0.25rem;\n\n  @include component.ix-component;\n\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  .wrapper {\n    display: flex;\n    align-items: flex-start;\n    width: 100%;\n    max-height: 100%;\n  }\n\n  .label {\n    word-break: break-word;\n    display: block;\n    white-space: normal;\n    overflow: hidden;\n    margin-block-start: 0.125rem;\n    margin-inline-start: 0.5rem;\n    min-height: 1rem;\n    margin-left: 0.625rem;\n  }\n\n  .switch {\n    all: unset;\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    min-width: 3rem;\n    max-width: 3rem;\n    height: 1.5rem;\n  }\n\n  .slider {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--theme-switch-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 1.5rem;\n    border: 0.0625rem solid transparent;\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 1.125rem;\n    width: 1.125rem;\n    left: 0.125rem;\n    bottom: 0.125rem;\n    background-color: var(--theme-switch-thumb-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 50%;\n  }\n\n  .switch.checked > .slider::before {\n    background-color: var(--theme-switch-thumb-on--background);\n    transform: translateX(1.5rem);\n  }\n\n  .switch > .slider {\n    border-color: var(--theme-switch-off--border-color);\n  }\n\n  .switch:hover > .slider {\n    background-color: var(--theme-switch-off--background--hover);\n    border-color: var(--theme-switch-off--border-color--hover);\n  }\n\n  .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--hover);\n  }\n\n  .switch:active > .slider {\n    background-color: var(--theme-switch-off--background--active);\n    border-color: var(--theme-switch-off--border-color--active);\n  }\n\n  .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--active);\n  }\n\n  .switch.checked > .slider {\n    background-color: var(--theme-switch-on--background);\n    border-color: var(--theme-switch-on--border-color);\n  }\n\n  .switch.checked:hover > .slider {\n    background-color: var(--theme-switch-on--background--hover);\n    border-color: var(--theme-switch-on--border-color--hover);\n  }\n\n  .switch.checked:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--hover);\n  }\n\n  .switch.checked:active > .slider {\n    background-color: var(--theme-switch-on--background--active);\n    border-color: var(--theme-switch-on--border-color--active);\n  }\n\n  .switch.checked:active > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--active);\n  }\n\n  .switch.indeterminate > .slider::before {\n    transform: translateX(0.75rem);\n  }\n}\n\n:host(:not(.disabled)) {\n  .wrapper {\n    cursor: pointer;\n  }\n\n  .switch:focus-visible > .slider {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: 0.0625rem;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  .switch {\n    opacity: 0.5;\n  }\n\n  .switch > .slider {\n    background-color: var(--theme-switch-off--background--disabled);\n  }\n\n  .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--disabled);\n  }\n\n  .switch.checked > .slider {\n    background-color: var(--theme-switch-on--background--disabled);\n  }\n\n  .switch.checked > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--disabled);\n  }\n\n  .label {\n    color: var(--theme-color-weak-text);\n  }\n}\n\n@mixin toggle-variant($selector) {\n  :host(#{$selector}:not(.disabled)) {\n    .slider {\n      @content;\n    }\n  }\n}\n\n@mixin define-toggle-vars($state, $type) {\n  --theme-switch-#{$state}--background: var(\n    --theme-switch-#{$state}--background--#{$type}\n  );\n  --theme-switch-#{$state}--background--hover: var(\n    --theme-switch-#{$state}--background--#{$type}--hover\n  );\n  --theme-switch-#{$state}--background--active: var(\n    --theme-switch-#{$state}--background--#{$type}--active\n  );\n\n  --theme-switch-thumb-#{$state}--background: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}\n  );\n  --theme-switch-thumb-#{$state}--background--hover: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}--hover\n  );\n  --theme-switch-thumb-#{$state}--background--active: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}--active\n  );\n\n  --theme-switch-#{$state}--border-color: var(\n    --theme-switch-#{$state}--border-color--#{$type}\n  );\n  --theme-switch-#{$state}--border-color--hover: var(\n    --theme-switch-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-switch-#{$state}--border-color--active: var(\n    --theme-switch-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include toggle-variant($selector: '.ix-info') {\n  @include define-toggle-vars('off', 'info');\n  @include define-toggle-vars('on', 'info');\n  @include define-toggle-vars('mixed', 'info');\n}\n\n@include toggle-variant($selector: '.ix-warning') {\n  @include define-toggle-vars('off', 'warning');\n  @include define-toggle-vars('on', 'warning');\n  @include define-toggle-vars('mixed', 'warning');\n}\n\n@include toggle-variant($selector: '.ix-invalid--required') {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\n}\n\n@include toggle-variant($selector: '.ix-invalid') {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { IxFormComponent, HookValidationLifecycle } from '../utils/input';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Toggle implements IxFormComponent<string> {\n  @AttachInternals() formInternals!: ElementInternals;\n\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\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   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = 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  /** @internal */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * An event will be dispatched each time the toggle is blurred.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private touched = false;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.disabled) {\n      return;\n    }\n\n    const wasIndeterminate = this.indeterminate;\n    const oldChecked = this.checked;\n\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n\n    this.checked = newChecked;\n\n    const { defaultPrevented } = this.checkedChange.emit(this.checked);\n\n    if (defaultPrevented) {\n      this.indeterminate = wasIndeterminate;\n      this.checked = oldChecked;\n    }\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue(): void {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value);\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  @Watch('checked')\n  watchCheckedChange() {\n    this.touched = true;\n    this.updateFormInternalValue();\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {\n    /** This function is intentionally empty */\n  }\n\n  render() {\n    let toggleText = this.textOff;\n\n    if (this.checked) {\n      toggleText = this.textOn;\n    }\n\n    if (this.indeterminate) {\n      toggleText = this.textIndeterminate;\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onBlur={() => this.ixBlur.emit()}\n        onFocus={() => (this.touched = true)}\n      >\n        <label class=\"wrapper\">\n          <button\n            role=\"switch\"\n            aria-checked={a11yBoolean(this.checked)}\n            class={{\n              switch: true,\n              checked: this.checked,\n              indeterminate: this.indeterminate,\n            }}\n            onClick={() => this.onCheckedChange(!this.checked)}\n          >\n            <div class=\"slider\"></div>\n          </button>\n          <input\n            type=\"checkbox\"\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            checked={this.checked}\n            tabindex={0}\n            aria-hidden={a11yBoolean(true)}\n            aria-checked={a11yBoolean(this.checked)}\n            onChange={(event) =>\n              this.onCheckedChange((event.target as HTMLInputElement).checked)\n            }\n          />\n          {!this.hideText && (\n            <ix-typography class=\"label\">{toggleText}</ix-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-toggle.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-flex;\n  flex-direction: row;\n  position: relative;\n  min-height: 1.5rem;\n  max-height: calc(100% - 0.5rem);\n  margin-block-start: 0.25rem;\n  margin-block-end: 0.25rem;\n\n  @include component.ix-component;\n\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  .wrapper {\n    display: flex;\n    align-items: flex-start;\n    width: 100%;\n    max-height: 100%;\n  }\n\n  .label {\n    word-break: break-word;\n    display: block;\n    white-space: normal;\n    overflow: hidden;\n    margin-block-start: 0.125rem;\n    margin-inline-start: 0.5rem;\n    min-height: 1rem;\n    margin-left: 0.625rem;\n  }\n\n  .switch {\n    all: unset;\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    min-width: 3rem;\n    max-width: 3rem;\n    height: 1.5rem;\n  }\n\n  .slider {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--theme-switch-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 1.5rem;\n    border: 0.0625rem solid transparent;\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 1.125rem;\n    width: 1.125rem;\n    left: 0.125rem;\n    bottom: 0.125rem;\n    background-color: var(--theme-switch-thumb-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 50%;\n  }\n\n  .switch.checked > .slider::before {\n    background-color: var(--theme-switch-thumb-on--background);\n    transform: translateX(1.5rem);\n  }\n\n  .switch > .slider {\n    border-color: var(--theme-switch-off--border-color);\n  }\n\n  .switch:hover > .slider {\n    background-color: var(--theme-switch-off--background--hover);\n    border-color: var(--theme-switch-off--border-color--hover);\n  }\n\n  .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--hover);\n  }\n\n  .switch:active > .slider {\n    background-color: var(--theme-switch-off--background--active);\n    border-color: var(--theme-switch-off--border-color--active);\n  }\n\n  .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--active);\n  }\n\n  .switch.checked > .slider {\n    background-color: var(--theme-switch-on--background);\n    border-color: var(--theme-switch-on--border-color);\n  }\n\n  .switch.checked:hover > .slider {\n    background-color: var(--theme-switch-on--background--hover);\n    border-color: var(--theme-switch-on--border-color--hover);\n  }\n\n  .switch.checked:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--hover);\n  }\n\n  .switch.checked:active > .slider {\n    background-color: var(--theme-switch-on--background--active);\n    border-color: var(--theme-switch-on--border-color--active);\n  }\n\n  .switch.checked:active > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--active);\n  }\n\n  .switch.indeterminate > .slider::before {\n    transform: translateX(0.75rem);\n  }\n}\n\n:host(:not(.disabled)) {\n  .wrapper {\n    cursor: pointer;\n  }\n\n  .switch:focus-visible > .slider {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: 0.0625rem;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  .switch {\n    opacity: 0.5;\n  }\n\n  .switch > .slider {\n    background-color: var(--theme-switch-off--background--disabled);\n  }\n\n  .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--disabled);\n  }\n\n  .switch.checked > .slider {\n    background-color: var(--theme-switch-on--background--disabled);\n  }\n\n  .switch.checked > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--disabled);\n  }\n\n  .label {\n    color: var(--theme-color-weak-text);\n  }\n}\n\n@mixin toggle-variant($selector) {\n  :host(#{$selector}:not(.disabled)) {\n    .slider {\n      @content;\n    }\n  }\n}\n\n@mixin define-toggle-vars($state, $type) {\n  --theme-switch-#{$state}--background: var(\n    --theme-switch-#{$state}--background--#{$type}\n  );\n  --theme-switch-#{$state}--background--hover: var(\n    --theme-switch-#{$state}--background--#{$type}--hover\n  );\n  --theme-switch-#{$state}--background--active: var(\n    --theme-switch-#{$state}--background--#{$type}--active\n  );\n\n  --theme-switch-thumb-#{$state}--background: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}\n  );\n  --theme-switch-thumb-#{$state}--background--hover: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}--hover\n  );\n  --theme-switch-thumb-#{$state}--background--active: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}--active\n  );\n\n  --theme-switch-#{$state}--border-color: var(\n    --theme-switch-#{$state}--border-color--#{$type}\n  );\n  --theme-switch-#{$state}--border-color--hover: var(\n    --theme-switch-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-switch-#{$state}--border-color--active: var(\n    --theme-switch-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include toggle-variant($selector: '.ix-info') {\n  @include define-toggle-vars('off', 'info');\n  @include define-toggle-vars('on', 'info');\n  @include define-toggle-vars('mixed', 'info');\n}\n\n@include toggle-variant($selector: '.ix-warning') {\n  @include define-toggle-vars('off', 'warning');\n  @include define-toggle-vars('on', 'warning');\n  @include define-toggle-vars('mixed', 'warning');\n}\n\n@include toggle-variant($selector: '.ix-invalid--required') {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\n}\n\n@include toggle-variant($selector: '.ix-invalid') {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { IxFormComponent, HookValidationLifecycle } from '../utils/input';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Toggle implements IxFormComponent<string> {\n  @AttachInternals() formInternals!: ElementInternals;\n\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\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   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = 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  /** @internal */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * An event will be dispatched each time the toggle is blurred.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private touched = false;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.disabled) {\n      return;\n    }\n\n    const wasIndeterminate = this.indeterminate;\n    const oldChecked = this.checked;\n\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n\n    this.checked = newChecked;\n\n    const { defaultPrevented } = this.checkedChange.emit(this.checked);\n\n    if (defaultPrevented) {\n      this.indeterminate = wasIndeterminate;\n      this.checked = oldChecked;\n    }\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue(): void {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value);\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  @Watch('checked')\n  watchCheckedChange() {\n    this.touched = true;\n    this.updateFormInternalValue();\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {\n    /** This function is intentionally empty */\n  }\n\n  render() {\n    let toggleText = this.textOff;\n\n    if (this.checked) {\n      toggleText = this.textOn;\n    }\n\n    if (this.indeterminate) {\n      toggleText = this.textIndeterminate;\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onBlur={() => this.ixBlur.emit()}\n        onFocus={() => (this.touched = true)}\n      >\n        <label class=\"wrapper\">\n          <button\n            role=\"switch\"\n            aria-checked={a11yBoolean(this.checked)}\n            class={{\n              switch: true,\n              checked: this.checked,\n              indeterminate: this.indeterminate,\n            }}\n            onClick={() => this.onCheckedChange(!this.checked)}\n          >\n            <div class=\"slider\"></div>\n          </button>\n          <input\n            type=\"checkbox\"\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            checked={this.checked}\n            tabindex={0}\n            aria-hidden={a11yBoolean(true)}\n            aria-checked={a11yBoolean(this.checked)}\n            onChange={(event) =>\n              this.onCheckedChange((event.target as HTMLInputElement).checked)\n            }\n          />\n          {!this.hideText && (\n            <ix-typography class=\"label\">{toggleText}</ix-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-tooltip.js

@@ -1,4 +1,4 @@
-import { T as Tooltip, d as defineCustomElement$1 } from './p-CgyFt6xa.js';
+import { T as Tooltip, d as defineCustomElement$1 } from './p-CGPMGyof.js';
 
 const IxTooltip = Tooltip;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-tree-item.js

@@ -1,4 +1,4 @@
-import { T as TreeItem, d as defineCustomElement$1 } from './p-DPvsZ0_G.js';
+import { T as TreeItem, d as defineCustomElement$1 } from './p-BSiqAMAr.js';
 
 const IxTreeItem = TreeItem;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-tree.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CaRf_gt1.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-DFHA6KvD.js';
 import { d as dropdownController } from './p-D3K9vmFp.js';
 import { r as renderDefaultItem, d as defaultRefreshTreeOptions } from './p-DSTYytot.js';
-import { d as defineCustomElement$2 } from './p-DPvsZ0_G.js';
+import { d as defineCustomElement$2 } from './p-BSiqAMAr.js';
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG

package/components/ix-typography.js

@@ -1,4 +1,4 @@
-import { I as IxTypography$1, d as defineCustomElement$1 } from './p-D5oUib1c.js';
+import { I as IxTypography$1, d as defineCustomElement$1 } from './p-BrgHqrnH.js';
 
 const IxTypography = IxTypography$1;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-upload.js

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CaRf_gt1.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-DFHA6KvD.js';
 import { U as UploadFileState } from './p-BGzrnl_l.js';
 import { r as iconSuccess, q as iconError } from './p-taILGXkr.js';
 import { b as a11yHostAttributes } from './p-Bb7pDeaQ.js';
-import { d as defineCustomElement$3 } from './p-BE7fI8pk.js';
-import { d as defineCustomElement$2 } from './p-B6A7qI08.js';
+import { d as defineCustomElement$3 } from './p-DlNAQJQO.js';
+import { d as defineCustomElement$2 } from './p-R9YNQy08.js';
 
-const uploadCss = ":host{display:block;min-height:4rem;height:4rem;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";
+const uploadCss = ":host{display:block;min-height:4rem;height:4rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG

package/components/ix-upload.js.map

@@ -1 +1 @@
-{"file":"ix-upload.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/upload/upload.scss?tag=ix-upload&encapsulation=shadow","src/components/upload/upload.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@use './common-variables' as vars;\n@use 'mixins/shadow-dom/component';\n@use 'mixins/text-truncation';\n\n:host {\n  display: block;\n  min-height: 4rem;\n  height: 4rem;\n\n  @include component.ix-component;\n\n  .file-upload-area {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    overflow: hidden;\n\n    height: 100%;\n    width: 100%;\n\n    padding: vars.$default-space;\n\n    border: 1px dashed var(--theme-upload--border-color);\n    border-radius: var(--theme-upload--border-radius);\n    color: var(--theme-upload-text--color);\n\n    &.multiline {\n      max-height: unset;\n      height: auto;\n\n      .glyph {\n        align-self: flex-start;\n        margin-block-start: 3px;\n      }\n\n      > div {\n        align-self: flex-start;\n      }\n    }\n\n    &:not(.multiline) {\n      .state,\n      .upload-text {\n        @include text-truncation.ellipsis;\n      }\n    }\n\n    &:not(.disabled).file-over {\n      border-color: var(--theme-upload--border-color--dragover);\n      border-style: solid;\n    }\n\n    &.checking {\n      color: var(--theme-upload-text--color--checking);\n      border-style: solid;\n    }\n\n    &.disabled {\n      border-style: solid;\n      color: var(--theme-upload-text--color--disabled);\n    }\n\n    ix-button {\n      margin-inline-start: vars.$default-space;\n    }\n\n    .upload-browser {\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    .loader {\n      margin: 2.187rem auto;\n      font-size: 0.937rem;\n      width: vars.$default-space;\n      height: vars.$default-space;\n      border-radius: 50%;\n      position: relative;\n      text-indent: -9999em;\n      animation: optimise-loading 1.1s infinite ease;\n      transform: translateZ(0);\n    }\n\n    .upload-filename {\n      margin-bottom: vars.$default-space;\n    }\n\n    .state {\n      display: flex;\n      align-items: center;\n\n      > ix-spinner {\n        margin-inline-end: vars.$small-space;\n      }\n\n      > ix-icon {\n        margin-inline-end: vars.$small-space;\n\n        &.icon-error {\n          color: var(--theme-color-alarm);\n        }\n\n        &.icon-success {\n          color: var(--theme-color-success);\n        }\n      }\n    }\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\nimport { iconError, iconSuccess } from '@siemens/ix-icons/icons';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-upload',\n  styleUrl: 'upload.scss',\n  shadow: true,\n})\nexport class Upload {\n  /**\n   * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n   * See {@link https://www.w3schools.com/tags/att_input_accept.asp}\n   */\n  @Prop() accept?: string;\n\n  /**\n   * If multiple is true the user can drop or select multiple files\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Whether the text should wrap to more than one line\n   */\n  @Prop() multiline = false;\n\n  /**\n   * Disable all input events\n   */\n  @Prop() disabled = false;\n\n  /**\n   * After a file is uploaded you can set the upload component to a defined state\n   */\n  @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n  /**\n   * Will be used by state = UploadFileState.SELECT_FILE\n   */\n  @Prop() selectFileText = '+ Drag files here or…';\n\n  /**\n   * Will be used by state = UploadFileState.LOADING\n   */\n  @Prop() loadingText = 'Checking files…';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_FAILED\n   */\n  @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n   */\n  @Prop() uploadSuccessText = 'Upload successful';\n\n  /**\n   * Label for upload file button\n   */\n  @Prop() i18nUploadFile = 'Upload file…';\n\n  /**\n   * Text for disabled state\n   */\n  @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n  /**\n   * You get an array of Files after drop-action or browse action is finished\n   */\n  @Event() filesChanged!: EventEmitter<Array<File>>;\n\n  @Element() hostElement!: HTMLIxUploadElement;\n\n  get inputElement(): HTMLInputElement {\n    return this.hostElement.shadowRoot!.querySelector('#upload-browser')!;\n  }\n\n  @State() isFileOver = false;\n\n  private filesToUpload?: Array<File>;\n\n  private a11y: A11yAttributes = {};\n\n  constructor() {}\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement);\n  }\n\n  private fileDropped(evt: DragEvent) {\n    evt.preventDefault();\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (!evt.dataTransfer) {\n      return;\n    }\n\n    const file: File | FileList = evt.dataTransfer.files;\n    this.isFileOver = false;\n\n    this.filesToUpload = this.convertToFileArray(file);\n    this.filesChanged.emit(this.filesToUpload);\n  }\n\n  private fileOver(event: DragEvent) {\n    if (!event.dataTransfer) {\n      return;\n    }\n\n    if (this.state !== UploadFileState.LOADING) {\n      event.preventDefault();\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    if (!this.multiple && event.dataTransfer.items.length > 1) {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.effectAllowed = 'none';\n      event.dataTransfer.dropEffect = 'none';\n    } else {\n      this.isFileOver = true;\n    }\n  }\n\n  private fileLeave() {\n    this.isFileOver = false;\n  }\n\n  private fileChangeEvent(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (!event.target) {\n      return;\n    }\n\n    this.filesToUpload = this.convertToFileArray(\n      (event.target as HTMLInputElement).files\n    );\n\n    this.filesChanged.emit(this.filesToUpload);\n\n    // Workaround for bug in native input element, that prevents the user from uploading\n    // a file with the same name as the most recent one, but with changed content.\n    this.inputElement.type = '';\n    this.inputElement.type = 'file';\n  }\n\n  private convertToFileArray(filesFromEvent: FileList | File | null): File[] {\n    let files = [];\n\n    if (!filesFromEvent) {\n      return [];\n    }\n\n    if (filesFromEvent instanceof FileList) {\n      files = Array.from(filesFromEvent);\n    } else {\n      files = [filesFromEvent];\n    }\n    return files;\n  }\n\n  private renderUploadState() {\n    if (this.disabled) {\n      return (\n        <span class=\"state\">\n          <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n        </span>\n      );\n    }\n\n    switch (this.state) {\n      case UploadFileState.SELECT_FILE:\n        return (\n          <span class=\"state\">\n            <span class=\"upload-text\">{this.selectFileText}</span>\n          </span>\n        );\n      case UploadFileState.LOADING:\n        return (\n          <span class=\"state\">\n            <ix-spinner variant=\"primary\"></ix-spinner>\n            <span class=\"upload-text\">{this.loadingText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_FAILED:\n        return (\n          <span class=\"state\">\n            <ix-icon name={iconError} class=\"icon-error\"></ix-icon>\n            <span class=\"upload-text\">{this.uploadFailedText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_SUCCESSED:\n        return (\n          <span class=\"state\">\n            <ix-icon name={iconSuccess} class=\"icon-success\"></ix-icon>\n            <span class=\"upload-text\">{this.uploadSuccessText}</span>\n          </span>\n        );\n      default:\n        return '';\n    }\n  }\n\n  /**\n   * Set files\n   * @param obj\n   */\n  @Method()\n  async setFilesToUpload(obj: any) {\n    this.filesToUpload = obj;\n  }\n\n  render() {\n    const disabled = this.disabled || this.state === UploadFileState.LOADING;\n    const { 'aria-label': ariaLabel = 'Upload files', ...a11y } = this.a11y;\n    return (\n      <Host {...a11y} aria-disabled={disabled}>\n        <div\n          class={{\n            'file-upload-area': true,\n            'file-over':\n              this.state !== UploadFileState.LOADING && this.isFileOver,\n            checking: this.state === UploadFileState.LOADING,\n            disabled: this.disabled,\n            multiline: this.multiline,\n          }}\n          onDrop={(e) => {\n            if (this.state !== UploadFileState.LOADING) {\n              this.fileDropped(e);\n            }\n          }}\n          onDragOver={(e) => this.fileOver(e)}\n          onDragLeave={() => this.fileLeave()}\n          draggable={!this.disabled}\n        >\n          {this.renderUploadState()}\n          <div>\n            <input\n              aria-label={ariaLabel}\n              aria-disabled={disabled}\n              multiple={this.multiple}\n              type=\"file\"\n              class=\"upload-browser\"\n              id=\"upload-browser\"\n              tabindex=\"-1\"\n              onChange={(e) => {\n                this.fileChangeEvent(e);\n              }}\n              accept={this.accept}\n              disabled={disabled}\n            />\n            <ix-button\n              variant=\"secondary\"\n              aria-disabled={disabled}\n              onClick={() => this.inputElement.click()}\n              disabled={disabled}\n            >\n              {this.i18nUploadFile}\n            </ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-upload.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/upload/upload.scss?tag=ix-upload&encapsulation=shadow","src/components/upload/upload.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@use './common-variables' as vars;\n@use 'mixins/shadow-dom/component';\n@use 'mixins/text-truncation';\n\n:host {\n  display: block;\n  min-height: 4rem;\n  height: 4rem;\n\n  @include component.ix-component;\n\n  .file-upload-area {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    overflow: hidden;\n\n    height: 100%;\n    width: 100%;\n\n    padding: vars.$default-space;\n\n    border: 1px dashed var(--theme-upload--border-color);\n    border-radius: var(--theme-upload--border-radius);\n    color: var(--theme-upload-text--color);\n\n    &.multiline {\n      max-height: unset;\n      height: auto;\n\n      .glyph {\n        align-self: flex-start;\n        margin-block-start: 3px;\n      }\n\n      > div {\n        align-self: flex-start;\n      }\n    }\n\n    &:not(.multiline) {\n      .state,\n      .upload-text {\n        @include text-truncation.ellipsis;\n      }\n    }\n\n    &:not(.disabled).file-over {\n      border-color: var(--theme-upload--border-color--dragover);\n      border-style: solid;\n    }\n\n    &.checking {\n      color: var(--theme-upload-text--color--checking);\n      border-style: solid;\n    }\n\n    &.disabled {\n      border-style: solid;\n      color: var(--theme-upload-text--color--disabled);\n    }\n\n    ix-button {\n      margin-inline-start: vars.$default-space;\n    }\n\n    .upload-browser {\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    .loader {\n      margin: 2.187rem auto;\n      font-size: 0.937rem;\n      width: vars.$default-space;\n      height: vars.$default-space;\n      border-radius: 50%;\n      position: relative;\n      text-indent: -9999em;\n      animation: optimise-loading 1.1s infinite ease;\n      transform: translateZ(0);\n    }\n\n    .upload-filename {\n      margin-bottom: vars.$default-space;\n    }\n\n    .state {\n      display: flex;\n      align-items: center;\n\n      > ix-spinner {\n        margin-inline-end: vars.$small-space;\n      }\n\n      > ix-icon {\n        margin-inline-end: vars.$small-space;\n\n        &.icon-error {\n          color: var(--theme-color-alarm);\n        }\n\n        &.icon-success {\n          color: var(--theme-color-success);\n        }\n      }\n    }\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\nimport { iconError, iconSuccess } from '@siemens/ix-icons/icons';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-upload',\n  styleUrl: 'upload.scss',\n  shadow: true,\n})\nexport class Upload {\n  /**\n   * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n   * See {@link https://www.w3schools.com/tags/att_input_accept.asp}\n   */\n  @Prop() accept?: string;\n\n  /**\n   * If multiple is true the user can drop or select multiple files\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Whether the text should wrap to more than one line\n   */\n  @Prop() multiline = false;\n\n  /**\n   * Disable all input events\n   */\n  @Prop() disabled = false;\n\n  /**\n   * After a file is uploaded you can set the upload component to a defined state\n   */\n  @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n  /**\n   * Will be used by state = UploadFileState.SELECT_FILE\n   */\n  @Prop() selectFileText = '+ Drag files here or…';\n\n  /**\n   * Will be used by state = UploadFileState.LOADING\n   */\n  @Prop() loadingText = 'Checking files…';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_FAILED\n   */\n  @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n   */\n  @Prop() uploadSuccessText = 'Upload successful';\n\n  /**\n   * Label for upload file button\n   */\n  @Prop() i18nUploadFile = 'Upload file…';\n\n  /**\n   * Text for disabled state\n   */\n  @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n  /**\n   * You get an array of Files after drop-action or browse action is finished\n   */\n  @Event() filesChanged!: EventEmitter<Array<File>>;\n\n  @Element() hostElement!: HTMLIxUploadElement;\n\n  get inputElement(): HTMLInputElement {\n    return this.hostElement.shadowRoot!.querySelector('#upload-browser')!;\n  }\n\n  @State() isFileOver = false;\n\n  private filesToUpload?: Array<File>;\n\n  private a11y: A11yAttributes = {};\n\n  constructor() {}\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement);\n  }\n\n  private fileDropped(evt: DragEvent) {\n    evt.preventDefault();\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (!evt.dataTransfer) {\n      return;\n    }\n\n    const file: File | FileList = evt.dataTransfer.files;\n    this.isFileOver = false;\n\n    this.filesToUpload = this.convertToFileArray(file);\n    this.filesChanged.emit(this.filesToUpload);\n  }\n\n  private fileOver(event: DragEvent) {\n    if (!event.dataTransfer) {\n      return;\n    }\n\n    if (this.state !== UploadFileState.LOADING) {\n      event.preventDefault();\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    if (!this.multiple && event.dataTransfer.items.length > 1) {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.effectAllowed = 'none';\n      event.dataTransfer.dropEffect = 'none';\n    } else {\n      this.isFileOver = true;\n    }\n  }\n\n  private fileLeave() {\n    this.isFileOver = false;\n  }\n\n  private fileChangeEvent(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (!event.target) {\n      return;\n    }\n\n    this.filesToUpload = this.convertToFileArray(\n      (event.target as HTMLInputElement).files\n    );\n\n    this.filesChanged.emit(this.filesToUpload);\n\n    // Workaround for bug in native input element, that prevents the user from uploading\n    // a file with the same name as the most recent one, but with changed content.\n    this.inputElement.type = '';\n    this.inputElement.type = 'file';\n  }\n\n  private convertToFileArray(filesFromEvent: FileList | File | null): File[] {\n    let files = [];\n\n    if (!filesFromEvent) {\n      return [];\n    }\n\n    if (filesFromEvent instanceof FileList) {\n      files = Array.from(filesFromEvent);\n    } else {\n      files = [filesFromEvent];\n    }\n    return files;\n  }\n\n  private renderUploadState() {\n    if (this.disabled) {\n      return (\n        <span class=\"state\">\n          <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n        </span>\n      );\n    }\n\n    switch (this.state) {\n      case UploadFileState.SELECT_FILE:\n        return (\n          <span class=\"state\">\n            <span class=\"upload-text\">{this.selectFileText}</span>\n          </span>\n        );\n      case UploadFileState.LOADING:\n        return (\n          <span class=\"state\">\n            <ix-spinner variant=\"primary\"></ix-spinner>\n            <span class=\"upload-text\">{this.loadingText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_FAILED:\n        return (\n          <span class=\"state\">\n            <ix-icon name={iconError} class=\"icon-error\"></ix-icon>\n            <span class=\"upload-text\">{this.uploadFailedText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_SUCCESSED:\n        return (\n          <span class=\"state\">\n            <ix-icon name={iconSuccess} class=\"icon-success\"></ix-icon>\n            <span class=\"upload-text\">{this.uploadSuccessText}</span>\n          </span>\n        );\n      default:\n        return '';\n    }\n  }\n\n  /**\n   * Set files\n   * @param obj\n   */\n  @Method()\n  async setFilesToUpload(obj: any) {\n    this.filesToUpload = obj;\n  }\n\n  render() {\n    const disabled = this.disabled || this.state === UploadFileState.LOADING;\n    const { 'aria-label': ariaLabel = 'Upload files', ...a11y } = this.a11y;\n    return (\n      <Host {...a11y} aria-disabled={disabled}>\n        <div\n          class={{\n            'file-upload-area': true,\n            'file-over':\n              this.state !== UploadFileState.LOADING && this.isFileOver,\n            checking: this.state === UploadFileState.LOADING,\n            disabled: this.disabled,\n            multiline: this.multiline,\n          }}\n          onDrop={(e) => {\n            if (this.state !== UploadFileState.LOADING) {\n              this.fileDropped(e);\n            }\n          }}\n          onDragOver={(e) => this.fileOver(e)}\n          onDragLeave={() => this.fileLeave()}\n          draggable={!this.disabled}\n        >\n          {this.renderUploadState()}\n          <div>\n            <input\n              aria-label={ariaLabel}\n              aria-disabled={disabled}\n              multiple={this.multiple}\n              type=\"file\"\n              class=\"upload-browser\"\n              id=\"upload-browser\"\n              tabindex=\"-1\"\n              onChange={(e) => {\n                this.fileChangeEvent(e);\n              }}\n              accept={this.accept}\n              disabled={disabled}\n            />\n            <ix-button\n              variant=\"secondary\"\n              aria-disabled={disabled}\n              onClick={() => this.inputElement.click()}\n              disabled={disabled}\n            >\n              {this.i18nUploadFile}\n            </ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-validation-tooltip.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CaRf_gt1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-DFHA6KvD.js';
 import { i as inline, s as shift, o as offset, f as flip, a as autoUpdate, b as arrow, c as computePosition } from './p-CAqtPJ4-.js';
 
 const validationTooltipCss = ".text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:inline-block;position:relative;width:100%;z-index:var(--theme-z-index-tooltip)}:host .validation-tooltip{background-color:var(--theme-tooltip--background);color:var(--theme-tooltip--color);padding:5px 10px;border-radius:4px;font-size:13px;border:1px solid var(--theme-tooltip--border-color);box-shadow:0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1), 0 12px 18px 0 rgba(0, 0, 40, 0.1)}:host .validation-tooltip #arrow,:host .validation-tooltip #arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .validation-tooltip #arrow{visibility:hidden}:host .validation-tooltip #arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tooltip--background)}:host .validation-tooltip>#arrow{bottom:-5px}:host .validation-tooltip>#arrow::before{border-right:1px solid var(--theme-tooltip--border-color);border-bottom:1px solid var(--theme-tooltip--border-color)}";

package/components/ix-workflow-step.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, d as Host } from './p-CaRf_gt1.js';
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, d as Host } from './p-DFHA6KvD.js';
 import { R as iconCircle, q as iconError, p as iconWarning, S as iconCircleFilled, r as iconSuccess, T as iconCircleDot, U as iconTriangleFilled } from './p-taILGXkr.js';
 
-const workflowStepCss = ":host(:not(.host-vertical)){width:12rem;height:4rem;min-width:2rem;min-height:4rem;max-width:12rem}:host(.host-vertical){width:100%;height:4rem;min-width:4rem;min-height:2rem;max-height:12rem}:host{display:inline-block;position:relative;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);padding:1.125rem 0 0.5rem 0}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:100%;padding:0 0.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}:host .step.vertical{flex-direction:row;padding:0;height:100%}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:100%}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin:0 1rem;padding:0;width:auto}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";
+const workflowStepCss = ":host(:not(.host-vertical)){width:12rem;height:4rem;min-width:2rem;min-height:4rem;max-width:12rem}:host(.host-vertical){width:100%;height:4rem;min-width:4rem;min-height:2rem;max-height:12rem}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);padding:1.125rem 0 0.5rem 0}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:100%;padding:0 0.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}:host .step.vertical{flex-direction:row;padding:0;height:100%}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:100%}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin:0 1rem;padding:0;width:auto}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";
 
 const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends H {
     constructor(registerHost) {

package/components/ix-workflow-step.js.map

@@ -1 +1 @@
-{"file":"ix-workflow-step.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=shadow","src/components/workflow-step/workflow-step.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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@use './common-variables' as vars;\n@use 'mixins/shadow-dom/component';\n\n:host(:not(.host-vertical)) {\n  width: 12rem;\n  height: 4rem;\n  min-width: 2rem;\n  min-height: 4rem;\n  max-width: 12rem;\n}\n\n:host(.host-vertical) {\n  width: 100%;\n  height: 4rem;\n  min-width: 4rem;\n  min-height: 2rem;\n  max-height: 12rem;\n}\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  @include component.ix-component;\n\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: var(--theme-workflow-step--background);\n    border-radius: var(--theme-workflow--border-radius);\n    padding: 1.125rem 0 vars.$small-space 0;\n\n    .wrapper {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n\n      .line {\n        width: 100%;\n        height: 0.125rem;\n        background-color: var(--theme-workflow-step-icon-default--color);\n\n        &.first,\n        &.last {\n          width: 50%;\n          margin: 0 0 0 auto;\n        }\n\n        &.last {\n          margin: 0 auto 0 0;\n        }\n\n        &.single {\n          width: 0;\n        }\n\n        &.selected {\n          background-color: var(\n              --theme-workflow-step-icon-default--color--selected\n          );\n        }\n\n        &.done {\n          background-color: var(--theme-workflow-step-icon-done--color);\n\n          &.selected {\n            background-color: var(\n                --theme-workflow-step-icon-done--color--selected\n            );\n          }\n        }\n\n        &.warning {\n          background-color: var(--theme-color-warning);\n        }\n\n        &.success {\n          background-color: var(--theme-color-success);\n        }\n\n        &.error {\n          background-color: var(--theme-color-alarm);\n        }\n      }\n\n      .iconWrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n\n        .absolute {\n          position: absolute;\n        }\n      }\n    }\n\n    .text {\n      margin-top: vars.$default-space;\n      width: 100%;\n      padding: 0 vars.$small-space;\n\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      text-align: center;\n    }\n\n    &.vertical {\n      flex-direction: row;\n      padding: 0;\n      height: 100%;\n\n      .wrapper {\n        width: auto;\n        padding-left: 1.125rem;\n        height: 100%;\n\n        .line {\n          width: 0.125rem;\n          height: 100%;\n\n          &.first,\n          &.last {\n            height: 50%;\n            margin: auto 0 0 0;\n          }\n\n          &.last {\n            margin: 0 0 auto 0;\n          }\n\n          &.single {\n            width: 0;\n          }\n        }\n      }\n\n      .text {\n        margin: 0 vars.$default-space;\n        padding: 0;\n        width: auto;\n      }\n    }\n\n    &.clickable {\n      &:hover {\n        background-color: var(--theme-workflow-step--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-workflow-step--background--active);\n      }\n    }\n\n    &:focus-visible {\n      outline: 1px solid var(--focus--border-color);\n      border-radius: 0;\n    }\n\n    &.selected {\n      background-color: var(--theme-workflow-step--background--selected);\n    }\n\n    &.disabled {\n      background-color: var(--theme-workflow-step--background--disabled);\n\n      .line {\n        background-color: var(\n          --theme-workflow-step-icon-default--color--disabled\n        ) !important;\n      }\n\n      .text {\n        color: var(--theme-workflow-step--color--disabled);\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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  iconCircle,\n  iconCircleDot,\n  iconCircleFilled,\n  iconError,\n  iconSuccess,\n  iconTriangleFilled,\n  iconWarning,\n} from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  shadow: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement!: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   *\n   * @internal\n   */\n  @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';\n\n  @State() iconName?: string;\n\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  /**\n   * @internal\n   */\n  @Event() selectedChanged!: EventEmitter<HTMLIxWorkflowStepElement>;\n\n  private customIconSlot: boolean = false;\n\n  @Watch('selected')\n  selectedHandler() {\n    this.setWorkflowStepStyles();\n  }\n\n  @Watch('disabled')\n  @Watch('status')\n  watchPropHandler() {\n    this.setWorkflowStepStyles();\n  }\n\n  setWorkflowStepStyles() {\n    const selectedStyle = this.selected ? '--selected' : '';\n    switch (this.status) {\n      case 'open':\n        this.iconName = this.selected ? iconCircleDot : iconCircle;\n        this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n        break;\n      case 'success':\n        this.iconName = iconSuccess;\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = iconCircleFilled;\n        this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n        break;\n      case 'warning':\n        this.iconName = iconWarning;\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = iconError;\n        this.iconColor = 'color-alarm';\n        break;\n      default:\n        this.iconName = iconCircle;\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentWillLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  onStepClick() {\n    if (!this.disabled && this.clickable) {\n      this.selectedChanged.emit(this.hostElement);\n    }\n  }\n\n  getIconAriaLabel() {\n    switch (this.iconName) {\n      case iconCircle:\n        return 'Circle';\n      case iconCircleDot:\n        return 'Circle dot';\n      case iconCircleFilled:\n        return 'Done';\n      case iconError:\n        return 'Error';\n      case iconSuccess:\n        return 'Success';\n      case iconTriangleFilled:\n        return 'Warning';\n      case iconWarning:\n        return 'Warning';\n      default:\n        return 'Step';\n    }\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.status === 'warning' ? iconTriangleFilled : iconCircleFilled\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n          aria-label={this.getIconAriaLabel()}\n        ></ix-icon>\n      </Fragment>\n    ) : null;\n\n    return (\n      <Host\n        class={{ 'host-vertical': this.vertical }}\n        onClick={() => this.onStepClick()}\n      >\n        <div\n          tabIndex={0}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n            clickable: this.clickable && !this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-workflow-step.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=shadow","src/components/workflow-step/workflow-step.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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@use './common-variables' as vars;\n@use 'mixins/shadow-dom/component';\n\n:host(:not(.host-vertical)) {\n  width: 12rem;\n  height: 4rem;\n  min-width: 2rem;\n  min-height: 4rem;\n  max-width: 12rem;\n}\n\n:host(.host-vertical) {\n  width: 100%;\n  height: 4rem;\n  min-width: 4rem;\n  min-height: 2rem;\n  max-height: 12rem;\n}\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  @include component.ix-component;\n\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: var(--theme-workflow-step--background);\n    border-radius: var(--theme-workflow--border-radius);\n    padding: 1.125rem 0 vars.$small-space 0;\n\n    .wrapper {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n\n      .line {\n        width: 100%;\n        height: 0.125rem;\n        background-color: var(--theme-workflow-step-icon-default--color);\n\n        &.first,\n        &.last {\n          width: 50%;\n          margin: 0 0 0 auto;\n        }\n\n        &.last {\n          margin: 0 auto 0 0;\n        }\n\n        &.single {\n          width: 0;\n        }\n\n        &.selected {\n          background-color: var(\n              --theme-workflow-step-icon-default--color--selected\n          );\n        }\n\n        &.done {\n          background-color: var(--theme-workflow-step-icon-done--color);\n\n          &.selected {\n            background-color: var(\n                --theme-workflow-step-icon-done--color--selected\n            );\n          }\n        }\n\n        &.warning {\n          background-color: var(--theme-color-warning);\n        }\n\n        &.success {\n          background-color: var(--theme-color-success);\n        }\n\n        &.error {\n          background-color: var(--theme-color-alarm);\n        }\n      }\n\n      .iconWrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n\n        .absolute {\n          position: absolute;\n        }\n      }\n    }\n\n    .text {\n      margin-top: vars.$default-space;\n      width: 100%;\n      padding: 0 vars.$small-space;\n\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      text-align: center;\n    }\n\n    &.vertical {\n      flex-direction: row;\n      padding: 0;\n      height: 100%;\n\n      .wrapper {\n        width: auto;\n        padding-left: 1.125rem;\n        height: 100%;\n\n        .line {\n          width: 0.125rem;\n          height: 100%;\n\n          &.first,\n          &.last {\n            height: 50%;\n            margin: auto 0 0 0;\n          }\n\n          &.last {\n            margin: 0 0 auto 0;\n          }\n\n          &.single {\n            width: 0;\n          }\n        }\n      }\n\n      .text {\n        margin: 0 vars.$default-space;\n        padding: 0;\n        width: auto;\n      }\n    }\n\n    &.clickable {\n      &:hover {\n        background-color: var(--theme-workflow-step--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-workflow-step--background--active);\n      }\n    }\n\n    &:focus-visible {\n      outline: 1px solid var(--focus--border-color);\n      border-radius: 0;\n    }\n\n    &.selected {\n      background-color: var(--theme-workflow-step--background--selected);\n    }\n\n    &.disabled {\n      background-color: var(--theme-workflow-step--background--disabled);\n\n      .line {\n        background-color: var(\n          --theme-workflow-step-icon-default--color--disabled\n        ) !important;\n      }\n\n      .text {\n        color: var(--theme-workflow-step--color--disabled);\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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  iconCircle,\n  iconCircleDot,\n  iconCircleFilled,\n  iconError,\n  iconSuccess,\n  iconTriangleFilled,\n  iconWarning,\n} from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  shadow: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement!: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   *\n   * @internal\n   */\n  @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';\n\n  @State() iconName?: string;\n\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  /**\n   * @internal\n   */\n  @Event() selectedChanged!: EventEmitter<HTMLIxWorkflowStepElement>;\n\n  private customIconSlot: boolean = false;\n\n  @Watch('selected')\n  selectedHandler() {\n    this.setWorkflowStepStyles();\n  }\n\n  @Watch('disabled')\n  @Watch('status')\n  watchPropHandler() {\n    this.setWorkflowStepStyles();\n  }\n\n  setWorkflowStepStyles() {\n    const selectedStyle = this.selected ? '--selected' : '';\n    switch (this.status) {\n      case 'open':\n        this.iconName = this.selected ? iconCircleDot : iconCircle;\n        this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n        break;\n      case 'success':\n        this.iconName = iconSuccess;\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = iconCircleFilled;\n        this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n        break;\n      case 'warning':\n        this.iconName = iconWarning;\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = iconError;\n        this.iconColor = 'color-alarm';\n        break;\n      default:\n        this.iconName = iconCircle;\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentWillLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  onStepClick() {\n    if (!this.disabled && this.clickable) {\n      this.selectedChanged.emit(this.hostElement);\n    }\n  }\n\n  getIconAriaLabel() {\n    switch (this.iconName) {\n      case iconCircle:\n        return 'Circle';\n      case iconCircleDot:\n        return 'Circle dot';\n      case iconCircleFilled:\n        return 'Done';\n      case iconError:\n        return 'Error';\n      case iconSuccess:\n        return 'Success';\n      case iconTriangleFilled:\n        return 'Warning';\n      case iconWarning:\n        return 'Warning';\n      default:\n        return 'Step';\n    }\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.status === 'warning' ? iconTriangleFilled : iconCircleFilled\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n          aria-label={this.getIconAriaLabel()}\n        ></ix-icon>\n      </Fragment>\n    ) : null;\n\n    return (\n      <Host\n        class={{ 'host-vertical': this.vertical }}\n        onClick={() => this.onStepClick()}\n      >\n        <div\n          tabIndex={0}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n            clickable: this.clickable && !this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}