@siemens/ix 0.0.0-pr-2166-20251001134702 → 0.0.0-pr-2214-20251017134939

package/components/ix-validation-tooltip.js

@@ -0,0 +1,184 @@
+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)}";
+
+const ValidationTooltip = /*@__PURE__*/ proxyCustomElement(class ValidationTooltip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Placement of the tooltip
+         */
+        this.placement = 'top';
+        /**
+         * Suppress the automatic placement of the dropdown.
+         */
+        this.suppressAutomaticPlacement = false;
+        this.isInputValid = true;
+        this.onSubmitBind = this.onSubmit.bind(this);
+        this.onInputFocusBind = this.onInputFocus.bind(this);
+    }
+    get arrow() {
+        return this.hostElement.shadowRoot.querySelector('#arrow');
+    }
+    get inputElement() {
+        return this.hostElement.querySelector('input');
+    }
+    get formElement() {
+        var _a;
+        return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.form;
+    }
+    get tooltipElement() {
+        return this.hostElement.shadowRoot.querySelector('.validation-tooltip');
+    }
+    destroyAutoUpdate() {
+        if (this.tooltipElement) {
+            this.tooltipElement.style.display = 'none';
+        }
+        if (this.autoUpdateCleanup) {
+            this.autoUpdateCleanup();
+        }
+    }
+    applyTooltipPosition() {
+        this.tooltipElement.style.display = 'block';
+        let positionConfig = {
+            strategy: 'fixed',
+            middleware: [
+                inline(),
+                shift(),
+                offset({
+                    mainAxis: 8,
+                }),
+            ],
+        };
+        if (!positionConfig.middleware) {
+            positionConfig.middleware = [];
+        }
+        if (!this.suppressAutomaticPlacement) {
+            positionConfig.middleware.push(flip({ fallbackStrategy: 'initialPlacement' }));
+        }
+        positionConfig.placement = this.placement;
+        this.autoUpdateCleanup = autoUpdate(this.inputElement, this.tooltipElement, async () => {
+            positionConfig.middleware = [
+                ...positionConfig.middleware,
+                arrow({
+                    element: this.arrow,
+                }),
+            ];
+            const computeResponse = await computePosition(this.inputElement, this.tooltipElement, positionConfig);
+            if (computeResponse.middlewareData.arrow) {
+                const { x, y } = computeResponse.middlewareData.arrow;
+                this.arrowPosition = {
+                    x,
+                    y,
+                };
+                Object.assign(this.arrow.style, {
+                    left: x != null ? `${x}px` : '',
+                    top: y != null ? `${y}px` : '',
+                });
+            }
+            this.tooltipPosition = {
+                x: computeResponse.x,
+                y: computeResponse.y,
+            };
+        }, {
+            ancestorResize: true,
+            ancestorScroll: true,
+            elementResize: true,
+        });
+    }
+    componentDidLoad() {
+        if (!this.inputElement) {
+            throw Error('Validation tooltip is only working with an direct input child.');
+        }
+        if (!this.formElement) {
+            throw Error('Validation tooltip is only working with an form element.');
+        }
+        this.formElement.addEventListener('submit', this.onSubmitBind);
+        this.inputElement.addEventListener('focus', this.onInputFocusBind);
+        this.observer = new MutationObserver(() => {
+            if (this.inputElement.classList.contains('is-invalid')) {
+                this.isInputValid = false;
+                this.validationChanged();
+            }
+        });
+        this.observer.observe(this.inputElement, {
+            childList: false,
+            subtree: false,
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    onInputFocus() {
+        this.isInputValid = true;
+    }
+    onSubmit() {
+        if (this.formElement.classList.contains('needs-validation')) {
+            this.isInputValid = this.inputElement.validity.valid;
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.destroyAutoUpdate();
+        (_b = this.formElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitBind);
+        (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.onInputFocusBind);
+    }
+    validationChanged() {
+        if (!this.isInputValid) {
+            this.applyTooltipPosition();
+        }
+        else {
+            this.destroyAutoUpdate();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: '4fb1bd884352a044ab9d4ea2eb70d2d80b331ebf' }, h("slot", { key: '67df32333b98236630a4caf63776ea634129d1ae' }), h("div", { key: '19cd5c7800c381a86b7135fb4538f3cad08abe46', role: "tooltip", style: {
+                display: 'none',
+                position: 'fixed',
+                top: '0',
+                left: '0',
+                transform: `translate(${Math.round((_b = (_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0)}px,${Math.round((_d = (_c = this.tooltipPosition) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0)}px)`,
+            }, class: "validation-tooltip text-default" }, this.message, h("slot", { key: 'f1ff77002cc733ef058755cc117747f1ba00a3ea', name: "tooltip-message" }), h("div", { key: '5bcb70ba97cad112c1c5945d32cd52fa37784bb6', id: "arrow" }))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "isInputValid": ["validationChanged"]
+    }; }
+    static get style() { return validationTooltipCss; }
+}, [257, "ix-validation-tooltip", {
+        "message": [1],
+        "placement": [1],
+        "suppressAutomaticPlacement": [4, "suppress-automatic-placement"],
+        "isInputValid": [32],
+        "tooltipPosition": [32],
+        "arrowPosition": [32]
+    }, undefined, {
+        "isInputValid": ["validationChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-validation-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-validation-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ValidationTooltip);
+            }
+            break;
+    } });
+}
+
+const IxValidationTooltip = ValidationTooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxValidationTooltip, defineCustomElement };
+//# sourceMappingURL=ix-validation-tooltip.js.map
+
+//# sourceMappingURL=ix-validation-tooltip.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-validation-tooltip.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,myHAAmyH;;MCiCnzH,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAaE;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAS,KAAK;AAE/B;;AAEG;AACK,QAAA,IAA0B,CAAA,0BAAA,GAAG,KAAK;AAEjC,QAAA,IAAY,CAAA,YAAA,GAAG,IAAI;QAIpB,IAAY,CAAA,YAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;QACvC,IAAgB,CAAA,gBAAA,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAmLxD;AA/KC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAgB;;AAG5E,IAAA,IAAI,YAAY,GAAA;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC;;AAGhD,IAAA,IAAI,WAAW,GAAA;;QACb,OAAO,MAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI;;AAGhC,IAAA,IAAI,cAAc,GAAA;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,qBAAqB,CAAE;;IAGnE,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;;AAG5C,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,iBAAiB,EAAE;;;IAIpB,oBAAoB,GAAA;QAC1B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO;AAE3C,QAAA,IAAI,cAAc,GAAmC;AACnD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE;AACV,gBAAA,MAAM,EAAE;AACR,gBAAA,KAAK,EAAE;AACP,gBAAA,MAAM,CAAC;AACL,oBAAA,QAAQ,EAAE,CAAC;iBACZ,CAAC;AACH,aAAA;SACF;AAED,QAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;AAC9B,YAAA,cAAc,CAAC,UAAU,GAAG,EAAE;;AAGhC,QAAA,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE;AACpC,YAAA,cAAc,CAAC,UAAU,CAAC,IAAI,CAC5B,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC,CAC/C;;AAEH,QAAA,cAAc,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;AAEzC,QAAA,IAAI,CAAC,iBAAiB,GAAG,UAAU,CACjC,IAAI,CAAC,YAAa,EAClB,IAAI,CAAC,cAAc,EACnB,YAAW;YACT,cAAc,CAAC,UAAU,GAAG;gBAC1B,GAAG,cAAc,CAAC,UAAW;AAC7B,gBAAA,KAAK,CAAC;oBACJ,OAAO,EAAE,IAAI,CAAC,KAAK;iBACpB,CAAC;aACH;AACD,YAAA,MAAM,eAAe,GAAG,MAAM,eAAe,CAC3C,IAAI,CAAC,YAAa,EAClB,IAAI,CAAC,cAAc,EACnB,cAAc,CACf;AAED,YAAA,IAAI,eAAe,CAAC,cAAc,CAAC,KAAK,EAAE;gBACxC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,eAAe,CAAC,cAAc,CAAC,KAG/C;gBACD,IAAI,CAAC,aAAa,GAAG;oBACnB,CAAC;oBACD,CAAC;iBACF;gBACD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AAC9B,oBAAA,IAAI,EAAE,CAAC,IAAI,IAAI,GAAG,CAAA,EAAG,CAAC,CAAA,EAAA,CAAI,GAAG,EAAE;AAC/B,oBAAA,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAA,EAAG,CAAC,CAAA,EAAA,CAAI,GAAG,EAAE;AAC/B,iBAAA,CAAC;;YAGJ,IAAI,CAAC,eAAe,GAAG;gBACrB,CAAC,EAAE,eAAe,CAAC,CAAC;gBACpB,CAAC,EAAE,eAAe,CAAC,CAAC;aACrB;AACH,SAAC,EACD;AACE,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,aAAa,EAAE,IAAI;AACpB,SAAA,CACF;;IAGH,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,MAAM,KAAK,CACT,gEAAgE,CACjE;;AAGH,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,MAAM,KAAK,CAAC,0DAA0D,CAAC;;QAGzE,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;QAC9D,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAElE,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACxC,IAAI,IAAI,CAAC,YAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACvD,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;gBACzB,IAAI,CAAC,iBAAiB,EAAE;;AAE5B,SAAC,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE;AACvC,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO,CAAC;AAC3B,SAAA,CAAC;;IAGI,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;IAGlB,QAAQ,GAAA;QACd,IAAI,IAAI,CAAC,WAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE;YAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAa,CAAC,QAAQ,CAAC,KAAK;;;IAIzD,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAC3B,IAAI,CAAC,iBAAiB,EAAE;AAExB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;AAClE,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC;;IAIxE,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,oBAAoB,EAAE;;aACtB;YACL,IAAI,CAAC,iBAAiB,EAAE;;;IAI5B,MAAM,GAAA;;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,GAAG,EAAE,GAAG;AACR,gBAAA,IAAI,EAAE,GAAG;gBACT,SAAS,EAAE,aAAa,IAAI,CAAC,KAAK,CAChC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC,CAC7B,CAAM,GAAA,EAAA,IAAI,CAAC,KAAK,CAAC,MAAA,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC,CAAC,CAAK,GAAA,CAAA;AACrD,aAAA,EACD,KAAK,EAAC,iCAAiC,EAAA,EAEtC,IAAI,CAAC,OAAO,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,iBAAiB,EAAQ,CAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAC,OAAO,GAAO,CAClB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/validation-tooltip/validation-tooltip.scss?tag=ix-validation-tooltip&encapsulation=shadow","src/components/validation-tooltip/validation-tooltip.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 'legacy/fonts';\n\n:host {\n  display: inline-block;\n  position: relative;\n  $padding: 5px;\n  width: 100%;\n  z-index: var(--theme-z-index-tooltip);\n\n  .validation-tooltip {\n    background-color: var(--theme-tooltip--background);\n    color: var(--theme-tooltip--color);\n    padding: $padding 10px;\n    border-radius: 4px;\n    font-size: 13px;\n    border: 1px solid var(--theme-tooltip--border-color);\n    box-shadow: 0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1),\n      0 12px 18px 0 rgba(0, 0, 40, 0.1);\n\n    #arrow,\n    #arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    #arrow {\n      visibility: hidden;\n    }\n\n    #arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n      background-color: var(--theme-tooltip--background);\n    }\n  }\n\n  .validation-tooltip > #arrow {\n    bottom: -5px;\n\n    &::before {\n      border-right: 1px solid var(--theme-tooltip--border-color);\n      border-bottom: 1px solid var(--theme-tooltip--border-color);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Side } from '../dropdown/placement';\n\ntype Position = { x: number; y: number };\n\n/**\n * @slot tooltip-message - Custom tooltip message with html support\n *\n * @deprecated Will be removed with 4.0.0\n */\n@Component({\n  tag: 'ix-validation-tooltip',\n  styleUrl: 'validation-tooltip.scss',\n  shadow: true,\n})\nexport class ValidationTooltip {\n  @Element() hostElement!: HTMLIxValidationTooltipElement;\n\n  /**\n   * Message of the tooltip\n   */\n  @Prop() message?: string;\n\n  /**\n   * Placement of the tooltip\n   */\n  @Prop() placement: Side = 'top';\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  @State() isInputValid = true;\n  @State() tooltipPosition?: Position;\n  @State() arrowPosition?: Position;\n\n  private onSubmitBind = this.onSubmit.bind(this);\n  private onInputFocusBind = this.onInputFocus.bind(this);\n  private autoUpdateCleanup?: () => void;\n  private observer?: MutationObserver;\n\n  get arrow() {\n    return this.hostElement.shadowRoot!.querySelector('#arrow') as HTMLElement;\n  }\n\n  get inputElement() {\n    return this.hostElement.querySelector('input');\n  }\n\n  get formElement() {\n    return this.inputElement?.form;\n  }\n\n  get tooltipElement(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('.validation-tooltip')!;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.tooltipElement) {\n      this.tooltipElement.style.display = 'none';\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  private applyTooltipPosition() {\n    this.tooltipElement.style.display = 'block';\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: 'fixed',\n      middleware: [\n        inline(),\n        shift(),\n        offset({\n          mainAxis: 8,\n        }),\n      ],\n    };\n\n    if (!positionConfig.middleware) {\n      positionConfig.middleware = [];\n    }\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n    positionConfig.placement = this.placement;\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.inputElement!,\n      this.tooltipElement,\n      async () => {\n        positionConfig.middleware = [\n          ...positionConfig.middleware!,\n          arrow({\n            element: this.arrow,\n          }),\n        ];\n        const computeResponse = await computePosition(\n          this.inputElement!,\n          this.tooltipElement,\n          positionConfig\n        );\n\n        if (computeResponse.middlewareData.arrow) {\n          const { x, y } = computeResponse.middlewareData.arrow as {\n            x: number;\n            y: number;\n          };\n          this.arrowPosition = {\n            x,\n            y,\n          };\n          Object.assign(this.arrow.style, {\n            left: x != null ? `${x}px` : '',\n            top: y != null ? `${y}px` : '',\n          });\n        }\n\n        this.tooltipPosition = {\n          x: computeResponse.x,\n          y: computeResponse.y,\n        };\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  componentDidLoad() {\n    if (!this.inputElement) {\n      throw Error(\n        'Validation tooltip is only working with an direct input child.'\n      );\n    }\n\n    if (!this.formElement) {\n      throw Error('Validation tooltip is only working with an form element.');\n    }\n\n    this.formElement.addEventListener('submit', this.onSubmitBind);\n    this.inputElement.addEventListener('focus', this.onInputFocusBind);\n\n    this.observer = new MutationObserver(() => {\n      if (this.inputElement!.classList.contains('is-invalid')) {\n        this.isInputValid = false;\n        this.validationChanged();\n      }\n    });\n\n    this.observer.observe(this.inputElement, {\n      childList: false,\n      subtree: false,\n      attributes: true,\n      attributeFilter: ['class'],\n    });\n  }\n\n  private onInputFocus() {\n    this.isInputValid = true;\n  }\n\n  private onSubmit() {\n    if (this.formElement!.classList.contains('needs-validation')) {\n      this.isInputValid = this.inputElement!.validity.valid;\n    }\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.destroyAutoUpdate();\n\n    this.formElement?.removeEventListener('submit', this.onSubmitBind);\n    this.inputElement?.removeEventListener('focus', this.onInputFocusBind);\n  }\n\n  @Watch('isInputValid')\n  validationChanged() {\n    if (!this.isInputValid) {\n      this.applyTooltipPosition();\n    } else {\n      this.destroyAutoUpdate();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div\n          role=\"tooltip\"\n          style={{\n            display: 'none',\n            position: 'fixed',\n            top: '0',\n            left: '0',\n            transform: `translate(${Math.round(\n              this.tooltipPosition?.x ?? 0\n            )}px,${Math.round(this.tooltipPosition?.y ?? 0)}px)`,\n          }}\n          class=\"validation-tooltip text-default\"\n        >\n          {this.message}\n          <slot name=\"tooltip-message\"></slot>\n          <div id=\"arrow\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-workflow-step.js

@@ -63,7 +63,8 @@ const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends
                 break;
             case 'warning':
                 this.iconName = iconWarning;
-                this.iconColor = 'color-warning';
+                //TODO(IX-3400): Replace icon colors with proper CSS variables when available
+                this.iconColor = 'color-warning-text';
                 break;
             case 'error':
                 this.iconName = iconError;
@@ -109,18 +110,18 @@ const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends
     }
     render() {
         const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.status === 'warning' ? iconTriangleFilled : iconCircleFilled, class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24", "aria-label": this.getIconAriaLabel() }))) : null;
-        return (h(Host, { key: '5ca415dbf8980f334bcf59a76f781bb44bb3544e', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: '741e55477d0f93fe76320d58507ea35c577710f7', tabIndex: 0, class: {
+        return (h(Host, { key: '488384edaa48299378abedcdff04034687550886', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: '2127d37a5062e645d50cc1b731c555b580ab2b16', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, h("div", { key: '28cbecf59891231d2fa4316fa8c77c33229a9cc4', class: "wrapper" }, h("div", { key: '60195eab00ad1e4be102347d850d41db89c901d9', class: {
+            } }, h("div", { key: '26445756e35b3b15ab1d3a98a004f70300fe48e5', class: "wrapper" }, h("div", { key: 'd1eaee49190a99111893a6c48f15b86c27fc2a7b', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), h("div", { key: '9178761bb03e982655cd3e110c22a2aac800fd9c', class: "iconWrapper" }, icons, h("slot", { key: '87288c358eeae6647e403d391708682221bc0ba1', name: "custom-icon" }))), h("div", { key: '4cca9daa0e142fe68eeecc4fa814666275855969', class: "text" }, h("slot", { key: '52f7a9c4abddd6676314765ceade4d546e7a3668' })))));
+            } }), h("div", { key: '89857433644f037867ff1de38c359617ae2ea0f6', class: "iconWrapper" }, icons, h("slot", { key: 'de995c4b059a3959574dbc9362e771e8fe0739a7', name: "custom-icon" }))), h("div", { key: '73a9e22a56933af2b3ee054aeab92ff7a8b5165a', class: "text" }, h("slot", { key: 'b5123599dbc97cea396640ea56910b24c701c319' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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        //TODO(IX-3400): Replace icon colors with proper CSS variables when available\n        this.iconColor = 'color-warning-text';\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}

package/components/ix-workflow-steps.js

@@ -82,7 +82,7 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
         this.updateSteps();
     }
     render() {
-        return (h(Host, { key: '4b1deac309ae7e20f8666445a1f0b159d109ffdd' }, h("div", { key: '09a2fabd46706d641330d20987e6da7b53a4031d', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '265c86ef75c802e96f6364b95bd1d0621d4fd334' }))));
+        return (h(Host, { key: '58f2b6c6dadb7f4bcef41463aeb7d0e7c7b78903' }, h("div", { key: '186972fd1f22f0a99af92bda5643c5156097122c', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '3d5efbb4c9ff065c8838a08c9ca5c9e4ce0daefb' }))));
     }
     get hostElement() { return this; }
     static get style() { return workflowStepsCss; }

package/components/{p-COHP8TmU.js → p-4zrYEasX.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-DFHA6KvD.js';
 
-const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}: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::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
+const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}: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::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-color-1);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
 
 const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends H {
     constructor(registerHost) {
@@ -107,6 +107,6 @@ function defineCustomElement() {
 }
 
 export { TabItem as T, defineCustomElement as d };
-//# sourceMappingURL=p-COHP8TmU.js.map
+//# sourceMappingURL=p-4zrYEasX.js.map
 
-//# sourceMappingURL=p-COHP8TmU.js.map
+//# sourceMappingURL=p-4zrYEasX.js.map

package/components/p-4zrYEasX.js.map

@@ -0,0 +1 @@
+{"file":"p-4zrYEasX.js","mappings":";;AAAA,MAAM,UAAU,GAAG,60IAA60I;;MCiBn1I,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAEpB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAOvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAyB,MAAM;AAE7C;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,QAAQ;AA4E/C;AArES,IAAA,cAAc,CAAC,KAQtB,EAAA;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;AACjB,YAAA,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;AACvC,YAAA,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;AACpC,YAAA,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB,KAAI;gBAC7B,IAAI,KAAK,CAAC,gBAAgB;oBAAE;AAE5B,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrC,oBAAA,WAAW,EAAE,KAAK;AACnB,iBAAA,CAAC;AAEF,gBAAA,IAAI,WAAW,CAAC,gBAAgB,EAAE;oBAChC,KAAK,CAAC,eAAe,EAAE;;AAE3B,aAAC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,OAAO;AACpB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;gBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAEA,IAAI,CAAC,OAAO,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px vars.$large-space;\n  line-height: 20px;\n  font-size: 14px;\n  font-weight: bold;\n  background-color: var(--theme-tab--background);\n  color: var(--theme-tab--color);\n\n  @include component.ix-component;\n\n  &::after {\n    content: '';\n    position: absolute;\n    background-color: var(--theme-tab-indicator--background);\n    width: 100%;\n    height: var(--theme-tab-indicator--height);\n    left: 0;\n  }\n\n  .text {\n    @include text-truncation.ellipsis;\n\n    span,\n    span::before {\n      pointer-events: none;\n    }\n\n    vertical-align: middle;\n  }\n\n  .circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 3rem;\n    width: 3rem;\n    background-color: var(--theme-animated-tab-indicator--background);\n    border-radius: 50%;\n    border: 2px solid var(--theme-animated-tab-circle--border-color);\n    color: var(--theme-an…icon--color);\n    cursor: pointer;\n\n    &.selected:not(.disabled) {\n      background-color: var(--theme-animated-tab-circle--background--selected);\n      color: var(--theme-animated-tab-icon--color--selected);\n      border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n      &:hover {\n        background-color: var(\n          --theme-animated-tab-circle--background--selected\n        );\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-animated-tab-circle--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &.disabled {\n      background-color: var(--theme-animated-tab-circle--background--disabled);\n      border-color: var(--theme-animated-tab-circle--border-color--disabled);\n    }\n  }\n\n  .counter {\n    position: absolute;\n    z-index: 1;\n    height: 16px;\n    width: auto;\n    background-color: var(--theme-color-1);\n    border: 1px solid var(--theme-tab-pill--border-color);\n    border-radius: 100px;\n    bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-left: vars.$tiny-space;\n    padding-right: vars.$tiny-space;\n    font-size: 12px;\n    line-height: 14px;\n    color: var(--theme-pill-outline--color);\n    cursor: pointer;\n\n    &.selected {\n      border-color: var(--theme-tab-pill--border-color--selected);\n    }\n\n    &.disabled {\n      border-color: var(--theme-tab-pill--border-color--disabled);\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n:host(.circle) {\n  height: 72px;\n}\n\n:host(.top) {\n  &::after {\n    top: 0;\n  }\n}\n\n:host(.bottom) {\n  &::after {\n    bottom: 0;\n  }\n}\n\n:host(.stretched) {\n  flex-basis: 100%;\n  width: 100%;\n  @include text-truncation.ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n  background-color: var(--theme-tab--background--hover);\n  color: var(--theme-tab-color-hover);\n  cursor: pointer;\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--hover);\n  }\n}\n\n:host(:active:not(.circle)) {\n  background-color: var(--theme-tab--background--active);\n  color: var(--theme-tab-color--active);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--active);\n  }\n}\n\n:host(:focus-visible) {\n  outline: 0px solid var(--focus--border-color);\n\n  .circle {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(:focus-visible:not(.circle)) {\n  outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-tab--color--disabled);\n  background-color: var(--theme-tab--background--disabled);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--disabled);\n  }\n}\n\n:host(.selected:not(.disabled)) {\n  background-color: var(--theme-tab--background--selected);\n  color: var(--theme-tab--color--selected);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--selected);\n  }\n}\n\n:host(.icon) {\n  padding: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n  height: 32px;\n  padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n  padding: vars.$default-space vars.$tiny-space;\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 type { TabClickDetail } from './tab-item.types';\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter?: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * Emitted when the tab is clicked.\n   */\n  @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          if (event.defaultPrevented) return;\n\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/{p-DklPCkRW.js → p-8MS-omi7.js}

@@ -11,7 +11,7 @@ const ModalContent = /*@__PURE__*/ proxyCustomElement(class ModalContent extends
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'ad65a8e851473037c8f1cfe43195c59e128c3523' }, h("slot", { key: 'edc352a2acac0a07a090db591cde4d6655f07c72' })));
+        return (h(Host, { key: 'd7bef3767ae242cfdd5a3367c9c2abb1f2c0d4d6' }, h("slot", { key: 'e2b8abbf51791d879a28bc322578e571d5714e8a' })));
     }
     static get style() { return modalContentCss; }
 }, [257, "ix-modal-content"]);
@@ -30,6 +30,6 @@ function defineCustomElement() {
 }
 
 export { ModalContent as M, defineCustomElement as d };
-//# sourceMappingURL=p-DklPCkRW.js.map
+//# sourceMappingURL=p-8MS-omi7.js.map
 
-//# sourceMappingURL=p-DklPCkRW.js.map
+//# sourceMappingURL=p-8MS-omi7.js.map

package/components/{p-DklPCkRW.js.map → p-8MS-omi7.js.map}

@@ -1 +1 @@
-{"file":"p-DklPCkRW.js","mappings":";;AAAA,MAAM,eAAe,GAAG,k2BAAk2B;;MCgB72B,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IACvB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","src/components/modal-content/modal-content.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@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0 0.5rem 0.5rem;\n\n  @include component.ix-component;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-8MS-omi7.js","mappings":";;AAAA,MAAM,eAAe,GAAG,k2BAAk2B;;MCgB72B,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IACvB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","src/components/modal-content/modal-content.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@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0 0.5rem 0.5rem;\n\n  @include component.ix-component;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/{p-7-Wnr7e5.js → p-BFuOBAQB.js}

@@ -19,15 +19,20 @@ const DateTimeCard = /*@__PURE__*/ proxyCustomElement(class DateTimeCard extends
          * Display footer
          */
         this.hasFooter = false;
+        /**
+         * set styles
+         */
+        this.individual = true;
         /**
          * Set corners style
          */
         this.corners = 'rounded';
     }
     cardClasses() {
+        var _a;
         return {
             card: true,
-            standaloneAppearance: this.embedded === false,
+            standaloneAppearance: (_a = this.standaloneAppearance) !== null && _a !== void 0 ? _a : this.individual,
             rounded: this.corners === 'rounded',
             left: this.corners === 'left',
             right: this.corners === 'right',
@@ -35,17 +40,18 @@ const DateTimeCard = /*@__PURE__*/ proxyCustomElement(class DateTimeCard extends
         };
     }
     render() {
-        return (h(Host, { key: '0429648eb4c31bde407975b519809a5a6fd8043a' }, h("div", { key: '21434d00d886949b32554468fdca445b2b5cf76f', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: '7ef2b75a31b0e75646010e7f02a8dc338117d627', class: "header-container" }, h("div", { key: 'bb3e80cbc6b1c9b5c9171638726074122cd91908', class: "header" }, h("slot", { key: '6ae65febb1ee7862df7dcc781fa68286bd0b7d5e', name: "header" })), h("div", { key: 'd4d63d904222fbc638a04ee16e11ceea03f03e0e', class: "separator" }))), h("div", { key: '0f299d9c0743f2b9e0c9f7a0e2504e51471d4475', class: {
+        return (h(Host, { key: '1917611940e9015bd69c54a4d727490e32c6296a' }, h("div", { key: 'd962cf1ab891fb257bdef627c19bf5265ac7ad06', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: '97ede2ac6f96e0802cd47deaa2ac19a6ffbb5d9c', class: "header-container" }, h("div", { key: '14dc85b4c1141543db4069245981712e4ddc6632', class: "header" }, h("slot", { key: '2f1656c886787682ed7b6c6cc340476664f61cee', name: "header" })), h("div", { key: '6e5931822bd606f3c5851528ba2a61dde147eabc', class: "separator" }))), h("div", { key: '1c90b793333c65471f03a8201206968b7f9e754c', class: {
                 content: true,
                 'content--time-picker': this.timePickerAppearance,
-            } }, h("slot", { key: '6c955414005a3d9e004f1f69ded181f60f59dee5' })), this.hasFooter && (h("div", { key: '09348617c1986599e342b209518727bd65976078', class: "footer-container" }, h("div", { key: 'c3b84578c1acf0f8c9f01dcf8b9ec30364408a89', class: "separator" }), h("div", { key: '2cd97f773f26fb1e48fa4f5bf459c3531379b22b', class: "footer" }, h("slot", { key: 'f079e60d93d18c34030ff23f0d8f2043b9a2d85e', name: "footer" })))))));
+            } }, h("slot", { key: '9048c1df91da871f53bc050a83c50ccdc94cbaf4' })), this.hasFooter && (h("div", { key: 'e3dcb1d1dc3aaaef5e7fca2456dd8fa84d0d5b05', class: "footer-container" }, h("div", { key: '6f1433df5e0a8fcc4ecc5b49312e84ace6c25a2c', class: "separator" }), h("div", { key: 'fa7fd4952aeb197504dd660857846c7d50146ebe', class: "footer" }, h("slot", { key: '0493e93bf1fc30281bfe9e1e0fdc051d68edba61', name: "footer" })))))));
     }
     static get style() { return dateTimeCardCss; }
 }, [257, "ix-date-time-card", {
-        "embedded": [4],
+        "standaloneAppearance": [4, "standalone-appearance"],
         "timePickerAppearance": [4, "time-picker-appearance"],
         "hideHeader": [4, "hide-header"],
         "hasFooter": [4, "has-footer"],
+        "individual": [4],
         "corners": [1]
     }]);
 function defineCustomElement() {
@@ -63,6 +69,6 @@ function defineCustomElement() {
 }
 
 export { DateTimeCard as D, defineCustomElement as d };
-//# sourceMappingURL=p-7-Wnr7e5.js.map
+//# sourceMappingURL=p-BFuOBAQB.js.map
 
-//# sourceMappingURL=p-7-Wnr7e5.js.map
+//# sourceMappingURL=p-BFuOBAQB.js.map

package/components/p-BFuOBAQB.js.map

@@ -0,0 +1 @@
+{"file":"p-BFuOBAQB.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6pDAA6pD;;MCoBxqD,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAUU,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;AAE7C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAElC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AA+CjD;IA7CS,WAAW,GAAA;;QACjB,OAAO;AACL,YAAA,IAAI,EAAE,IAAI;YACV,oBAAoB,EAAE,MAAA,IAAI,CAAC,oBAAoB,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,UAAU;AAClE,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC/B,YAAA,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;SACtC;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EAC3B,CAAC,IAAI,CAAC,UAAU,KACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,CAAO,CACzB,CACP,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,sBAAsB,EAAE,IAAI,CAAC,oBAAoB;AAClD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEL,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAO,CAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB,CACF,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.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\n:host {\n  @include component.ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: var(--theme-shadow-4);\n      border-radius: 0.25rem;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    &.straight {\n      border-radius: 0;\n    }\n\n    .header-container {\n      width: 100%;\n\n      .header {\n        padding: vars.$default-space;\n        flex: 0 1 auto;\n      }\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 vars.$default-space vars.$default-space vars.$default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n\n      &--time-picker {\n        padding: 0 vars.$default-space;\n      }\n    }\n\n    .footer-container {\n      width: 100%;\n\n      .footer {\n        padding: vars.$default-space;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { DateTimeCardCorners } from './date-time-card.types';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /** Timepicker specific styling */\n  @Prop() timePickerAppearance: boolean = false;\n\n  /**\n   * Hide header\n   */\n  @Prop() hideHeader: boolean = false;\n\n  /**\n   * Display footer\n   */\n  @Prop() hasFooter: boolean = false;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.standaloneAppearance ?? this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n      straight: this.corners === 'straight',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          {!this.hideHeader && (\n            <div class=\"header-container\">\n              <div class=\"header\">\n                <slot name=\"header\"></slot>\n              </div>\n              <div class=\"separator\"></div>\n            </div>\n          )}\n\n          <div\n            class={{\n              content: true,\n              'content--time-picker': this.timePickerAppearance,\n            }}\n          >\n            <slot></slot>\n          </div>\n\n          {this.hasFooter && (\n            <div class=\"footer-container\">\n              <div class=\"separator\"></div>\n              <div class=\"footer\">\n                <slot name=\"footer\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/{p-Baga5bu5.js → p-BSiqAMAr.js}

@@ -19,17 +19,17 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class TreeItem extends H {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '207140a58c23473bc6545cfee11e3f1ed1f1e9a0', class: {
+        return (h(Host, { key: '05f896e21e252fab0d3f39b4d52885342522d0f9', class: {
                 selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, h("div", { key: '0e0c0dff66b4f683a87edd378ee105fe36ef9c38', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
+            } }, h("div", { key: 'e716c8ee13d77bedf01cb603d8a65798a5cc647d', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
                 ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
             }, color: "color-std-text", onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle.emit();
-            }, "aria-label": this.ariaLabelChevronIcon })) : null), h("div", { key: '2d3bf649a70cd6f8cae585c09cc0cd0d90600502', class: "tree-node-container", onClick: () => {
+            }, "aria-label": this.ariaLabelChevronIcon })) : null), h("div", { key: '433f67a985cea3d1ea88f85e51355977197ae2fd', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, h("div", { key: '27405ea05eb88b7a038d467ddabbf07026490a44', class: "tree-node-text" }, this.text), h("slot", { key: '3c73467430f00bcf20bf07aeb1f67283d978ab80' }))));
+            } }, h("div", { key: 'abd3864dc9a2425da258b1844617d37b5f38b831', class: "tree-node-text" }, this.text), h("slot", { key: '16aa907095f9b1e28d825ca4cc6daacd04ca9bec' }))));
     }
     static get style() { return treeItemCss; }
 }, [257, "ix-tree-item", {
@@ -53,6 +53,6 @@ function defineCustomElement() {
 }
 
 export { TreeItem as T, defineCustomElement as d };
-//# sourceMappingURL=p-Baga5bu5.js.map
+//# sourceMappingURL=p-BSiqAMAr.js.map
 
-//# sourceMappingURL=p-Baga5bu5.js.map
+//# sourceMappingURL=p-BSiqAMAr.js.map

package/components/{p-Baga5bu5.js.map → p-BSiqAMAr.js.map}

@@ -1 +1 @@
-{"file":"p-Baga5bu5.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,0iEAA0iE;;MCkBjjE,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAWE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AA2D5B;IArCC,MAAM,GAAA;;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA;AACrC,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,IACf,CACE,CAAA,SAAA,EAAA,EAAA,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;AACL,gBAAA,CAAC,kBAAkB,GAAG,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA;aACjD,EACD,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAQ,KAAI;gBACpB,CAAC,CAAC,cAAc,EAAE;gBAClB,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,aAAC,EAAA,YAAA,EACW,IAAI,CAAC,oBAAoB,EAAA,CACrC,IACA,IAAI,CACJ,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,aAAC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n  width: 100%;\n\n  cursor: pointer;\n\n  @include component.ix-component;\n\n  .tree-node-container {\n    display: flex;\n    align-items: center;\n    height: vars.$x-large-space;\n    flex-grow: 1;\n    align-items: center;\n\n    @include text-truncation.ellipsis;\n\n    .tree-node-text {\n      @include text-truncation.ellipsis;\n    }\n  }\n\n  .icon-toggle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    min-width: 2rem;\n\n    ix-icon {\n      transition: transform var(--theme-default-time) ease-in-out;\n\n      &.icon-toggle-down {\n        transform: rotate(90deg);\n      }\n    }\n  }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n  background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n  background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n  background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n  background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n  background-color: var(--theme-tree-item--background--selected-active);\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-tree-item',\n  styleUrl: 'tree-item.scss',\n  shadow: true,\n})\nexport class TreeItem {\n  /**\n   * Text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Has tree item children\n   */\n  @Prop() hasChildren = false;\n\n  /**\n   * Context\n   */\n  @Prop() context?: TreeItemContext;\n\n  /**\n   * ARIA label for the chevron icon\n   */\n  @Prop() ariaLabelChevronIcon?: string;\n\n  /**\n   * Expand/Collapsed toggled\n   */\n  @Event() toggle!: EventEmitter<void>;\n\n  /**\n   * Click on item not on the expand/collapse icon\n   */\n  @Event() itemClick!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: !!this.context?.isSelected,\n        }}\n      >\n        <div class=\"icon-toggle-container\">\n          {this.hasChildren ? (\n            <ix-icon\n              name={iconChevronRightSmall}\n              size=\"24\"\n              class={{\n                ['icon-toggle-down']: !!this.context?.isExpanded,\n              }}\n              color=\"color-std-text\"\n              onClick={(e: Event) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.toggle.emit();\n              }}\n              aria-label={this.ariaLabelChevronIcon}\n            />\n          ) : null}\n        </div>\n        <div\n          class=\"tree-node-container\"\n          onClick={() => {\n            this.itemClick.emit();\n          }}\n        >\n          <div class=\"tree-node-text\">{this.text}</div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BSiqAMAr.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,0iEAA0iE;;MCkBjjE,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAWE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AA2D5B;IArCC,MAAM,GAAA;;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA;AACrC,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,IACf,CACE,CAAA,SAAA,EAAA,EAAA,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;AACL,gBAAA,CAAC,kBAAkB,GAAG,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA;aACjD,EACD,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAQ,KAAI;gBACpB,CAAC,CAAC,cAAc,EAAE;gBAClB,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,aAAC,EAAA,YAAA,EACW,IAAI,CAAC,oBAAoB,EAAA,CACrC,IACA,IAAI,CACJ,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,aAAC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n  width: 100%;\n\n  cursor: pointer;\n\n  @include component.ix-component;\n\n  .tree-node-container {\n    display: flex;\n    align-items: center;\n    height: vars.$x-large-space;\n    flex-grow: 1;\n    align-items: center;\n\n    @include text-truncation.ellipsis;\n\n    .tree-node-text {\n      @include text-truncation.ellipsis;\n    }\n  }\n\n  .icon-toggle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    min-width: 2rem;\n\n    ix-icon {\n      transition: transform var(--theme-default-time) ease-in-out;\n\n      &.icon-toggle-down {\n        transform: rotate(90deg);\n      }\n    }\n  }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n  background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n  background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n  background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n  background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n  background-color: var(--theme-tree-item--background--selected-active);\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-tree-item',\n  styleUrl: 'tree-item.scss',\n  shadow: true,\n})\nexport class TreeItem {\n  /**\n   * Text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Has tree item children\n   */\n  @Prop() hasChildren = false;\n\n  /**\n   * Context\n   */\n  @Prop() context?: TreeItemContext;\n\n  /**\n   * ARIA label for the chevron icon\n   */\n  @Prop() ariaLabelChevronIcon?: string;\n\n  /**\n   * Expand/Collapsed toggled\n   */\n  @Event() toggle!: EventEmitter<void>;\n\n  /**\n   * Click on item not on the expand/collapse icon\n   */\n  @Event() itemClick!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: !!this.context?.isSelected,\n        }}\n      >\n        <div class=\"icon-toggle-container\">\n          {this.hasChildren ? (\n            <ix-icon\n              name={iconChevronRightSmall}\n              size=\"24\"\n              class={{\n                ['icon-toggle-down']: !!this.context?.isExpanded,\n              }}\n              color=\"color-std-text\"\n              onClick={(e: Event) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.toggle.emit();\n              }}\n              aria-label={this.ariaLabelChevronIcon}\n            />\n          ) : null}\n        </div>\n        <div\n          class=\"tree-node-container\"\n          onClick={() => {\n            this.itemClick.emit();\n          }}\n        >\n          <div class=\"tree-node-text\">{this.text}</div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}