npm - @siemens/ix - Versions diffs - 0.0.0-pr-2166-20251001134702 → 0.0.0-pr-2212-20251017115125 - Mend

@siemens/ix 0.0.0-pr-2166-20251001134702 → 0.0.0-pr-2212-20251017115125

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (898) hide show

package/components/ix-validation-tooltip.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-validation-tooltip.js","mappings":"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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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}
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 //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 CHANGED Viewed

@@ -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-DklPCkRW.js → p-8MS-omi7.js} RENAMED Viewed

@@ -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} RENAMED Viewed

	@@ -1 +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}
1	+ {"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} RENAMED Viewed

@@ -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 ADDED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

	@@ -1 +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}
1	+ {"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}

package/components/{p-DE74-VWH.js → p-BYRT3Z1w.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-DFHA6KvD.js';
 import { p as iconWarning, r as iconSuccess, q as iconError, o as iconInfo, v as iconClose } from './p-taILGXkr.js';
-import { d as defineCustomElement$3 } from './p-bBkFZC8X.js';
-import { d as defineCustomElement$2 } from './p-R9YNQy08.js';
-import { d as defineCustomElement$1 } from './p-C4MK63gz.js';
+import { d as defineCustomElement$3 } from './p-D99ntB9D.js';
+import { d as defineCustomElement$2 } from './p-fef9-zXA.js';
+import { d as defineCustomElement$1 } from './p-BrgHqrnH.js';
 const toastCss = ":host{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius, var(--theme-toast--border-radus));box-shadow:var(--theme-toast--box-shadow);--animate-duration:var(--theme-medium-time)}: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 .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin-right:0.5rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-title{margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;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}:host .toast-body .toast-content .toast-action{margin-top:0.5rem}:host .toast-body .toast-icon+.toast-content{max-width:10.25rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px;opacity:0.6}:host .toast-close:hover{opacity:1}:host .toast-progress-bar{position:absolute;bottom:0;height:0.125rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
@@ -25,7 +25,7 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends H {
         /**
          * Autoclose behavior
          */
-        this.preventAutoClose = false;
+        this.autoClose = true;
         this.progress = 0;
         this.touched = false;
         this.paused = false;
@@ -42,7 +42,8 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends H {
             case 'success':
                 return (h("ix-icon", { "data-testid": "toast-icon", name: iconSuccess, size: "24", color: "color-success" }));
             case 'warning':
-                return (h("ix-icon", { "data-testid": "toast-icon", name: iconWarning, size: "24", color: "color-warning" }));
+                //TODO(IX-3400): Replace icon colors with proper CSS variables when available
+                return (h("ix-icon", { "data-testid": "toast-icon", name: iconWarning, size: "24", color: "color-warning-text" }));
             default:
                 return '';
         }
@@ -81,17 +82,17 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends H {
             animationPlayState: this.touched || this.paused ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: '5bb9319d0d791f26c3f8582a8f2b30949227495e', class: "animate__animated animate__fadeIn" }, h("div", { key: '53a17895512a0b40739e3b979f2d5fe47244ebec', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: '4be41b7d6326a30e985506471f5ef6a9fcfc4cf7', class: "animate__animated animate__fadeIn" }, h("div", { key: '02ae41f684be0f0c1b304c6565c22ec4cd9ee9d4', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: 'de5b26d9ce94d528e96d3881b3be81b83d8fb0b6', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: 'dd1956ba5d44ac65fe9fa1e2adf63285f137b3aa', class: "toast-message" }, h("slot", { key: '93e93ac00e332ab0200a0637b5de5c7603136725' })), h("div", { key: '3f84a2fb8198d937ddc15a79de7657851bcba9f5', class: "toast-action" }, h("slot", { key: '425ec2b59bef236f3513c462968151f747f4dcd1', name: "action" }))), h("div", { key: 'f0eafe9dcabb9391b27eb06b3309adff1167ee78', class: "toast-close" }, h("ix-icon-button", { key: '128cc7e124db71701fa43c17f7fc5f404772c0be', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (h("div", { key: 'b00ce915bd06952be5cef1575e6a06751e716d18', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: 'e9b2d338091b227f41b4470803b305394f3b2228', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: '527acd28a634e03f57eb6d92b3f67c40e0d2346a', class: "toast-message" }, h("slot", { key: '1574e31e91cb4f84af715e37da9adf396846951f' })), h("div", { key: '147f2e4f356cc028307cc504601bc0591e2cbd99', class: "toast-action" }, h("slot", { key: '3dfeccf1e8eb06fda37cef838a67abee67268190', name: "action" }))), h("div", { key: '036f9123375077554e7250dd8aaea513685571c8', class: "toast-close" }, h("ix-icon-button", { key: 'f2ef551fa606e0d03a9cb1f02d074bbe75d1e158', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {
                     this.close();
                 }
-            } }))));
+            } })) : null));
     }
     get hostElement() { return this; }
     static get style() { return toastCss; }
@@ -99,7 +100,7 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends H {
         "type": [1],
         "toastTitle": [1, "toast-title"],
         "autoCloseDelay": [2, "auto-close-delay"],
-        "preventAutoClose": [4, "prevent-auto-close"],
+        "autoClose": [4, "auto-close"],
         "icon": [1],
         "iconColor": [1, "icon-color"],
         "ariaLabelCloseIconButton": [1, "aria-label-close-icon-button"],
@@ -140,6 +141,6 @@ function defineCustomElement() {
 }
 export { Toast as T, defineCustomElement as d };
-//# sourceMappingURL=p-DE74-VWH.js.map
+//# sourceMappingURL=p-BYRT3Z1w.js.map
-//# sourceMappingURL=p-DE74-VWH.js.map
+//# sourceMappingURL=p-BYRT3Z1w.js.map

package/components/p-BYRT3Z1w.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BYRT3Z1w.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","src/components/toast/toast.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/hover';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n@use 'legacy/mixins/fonts';\n\n:host {\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 17.5rem;\n max-width: 17.5rem;\n min-height: 3.5rem;\n\n pointer-events: all;\n\n background-color: var(--theme-toast--background);\n border: var(--theme-toast--border-thickness) solid\n var(--theme-toast--border-color);\n border-radius: var(\n --theme-toast--border-radius,\n var(--theme-toast--border-radus)\n );\n box-shadow: var(--theme-toast--box-shadow);\n\n --animate-duration: var(--theme-medium-time);\n\n @include component.ix-component;\n\n .toast-body {\n display: flex;\n position: relative;\n min-height: 3.5rem;\n width: 100%;\n flex-grow: 1;\n padding: 0.75rem;\n\n .toast-icon {\n display: flex;\n align-items: flex-start;\n margin-right: 0.5rem;\n }\n\n .toast-content {\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n width: 100%;\n\n .toast-title {\n margin: 0.25rem 0px;\n }\n\n .toast-message {\n min-width: 0;\n\n @include fonts.text-default;\n }\n\n .toast-action {\n margin-top: 0.5rem;\n }\n }\n\n .toast-icon + .toast-content {\n max-width: 10.25rem;\n }\n }\n\n .toast-close {\n display: flex;\n position: relative;\n pointer-events: all;\n margin-left: auto;\n margin-right: 0px;\n opacity: 0.6;\n &:hover {\n opacity: 1;\n }\n }\n\n .toast-progress-bar {\n position: absolute;\n bottom: 0;\n height: 0.125rem;\n width: 100%;\n background-color: var(--theme-toast-timer-value--background);\n transform-origin: left;\n\n &--animated {\n animation: trackProgress linear 1 forwards;\n }\n }\n\n @keyframes trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\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 Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\nimport {\n iconClose,\n iconError,\n iconInfo,\n iconSuccess,\n iconWarning,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-toast',\n styleUrl: 'toast.scss',\n shadow: true,\n})\nexport class Toast {\n /**\n * Toast type\n */\n @Prop() type: ToastType = 'info';\n\n /**\n * Toast title\n */\n @Prop() toastTitle?: string;\n\n /**\n * Autoclose title after delay\n */\n @Prop() autoCloseDelay = 5000;\n\n /**\n * Autoclose behavior\n */\n @Prop() autoClose = true;\n\n /**\n * Icon of toast\n */\n @Prop() icon?: string;\n\n /**\n * Icon color of toast\n */\n @Prop() iconColor?: string;\n\n /**\n * ARIA label for the close icon button\n * Will be set as aria-label on the nested HTML button element\n *\n * @since 3.2.0\n */\n @Prop() ariaLabelCloseIconButton?: string;\n\n /**\n * Toast closed\n */\n @Event() closeToast!: EventEmitter;\n\n @State() progress = 0;\n @State() touched = false;\n @State() paused = false;\n\n @Element() hostElement!: HTMLIxToastElement;\n\n private getIcon() {\n if (this.icon) {\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={this.icon}\n color={this.iconColor}\n size=\"24\"\n />\n );\n }\n\n switch (this.type) {\n case 'info':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={iconInfo}\n size=\"24\"\n color=\"color-std-text\"\n />\n );\n\n case 'error':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={iconError}\n size=\"24\"\n color=\"color-alarm\"\n />\n );\n\n case 'success':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={iconSuccess}\n size=\"24\"\n color=\"color-success\"\n />\n );\n\n case 'warning':\n //TODO(IX-3400): Replace icon colors with proper CSS variables when available\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={iconWarning}\n size=\"24\"\n color=\"color-warning-text\"\n />\n );\n\n default:\n return '';\n }\n }\n\n private close() {\n if (this.hostElement) {\n this.hostElement.classList.add('animate__fadeOut');\n }\n setTimeout(() => {\n this.closeToast.emit();\n }, 250);\n }\n\n /**\n * Pause the toast's auto-close progress bar and timer.\n */\n @Method()\n async pause() {\n this.paused = true;\n }\n\n /**\n * Resume the toast's auto-close progress bar and timer if previously paused.\n */\n @Method()\n async resume() {\n this.paused = false;\n }\n\n /**\n * Returns whether the toast is currently paused (auto-close is paused).\n */\n @Method()\n async isPaused(): Promise<boolean> {\n return this.paused || this.touched;\n }\n\n render() {\n let progressBarStyle: Record<string, string> = {};\n\n const progressBarClass = ['toast-progress-bar'];\n\n progressBarStyle = {\n animationDuration: `${this.autoCloseDelay}ms`,\n animationPlayState: this.touched || this.paused ? 'paused' : 'running',\n };\n\n progressBarClass.push('toast-progress-bar--animated');\n\n return (\n <Host class=\"animate__animated animate__fadeIn\">\n <div\n class=\"toast-body\"\n onPointerLeave={() => {\n this.touched = false;\n }}\n onPointerEnter={() => {\n this.touched = true;\n }}\n >\n {this.type || this.icon ? (\n <div class=\"toast-icon\">{this.getIcon()}</div>\n ) : null}\n <div class=\"toast-content\">\n {this.toastTitle ? (\n <ix-typography class=\"toast-title\" format=\"h5\">\n {this.toastTitle}\n </ix-typography>\n ) : null}\n <div class=\"toast-message\">\n <slot></slot>\n </div>\n <div class=\"toast-action\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n <div class=\"toast-close\">\n <ix-icon-button\n icon={iconClose}\n iconColor=\"color-soft-text\"\n size=\"24\"\n variant=\"tertiary\"\n onClick={() => this.closeToast.emit()}\n aria-label={this.ariaLabelCloseIconButton}\n />\n </div>\n </div>\n {this.autoClose ? (\n <div\n class={progressBarClass.join(' ')}\n style={progressBarStyle}\n onAnimationEnd={() => {\n this.close();\n }}\n onTransitionEnd={() => {\n if (this.progress === 0) {\n this.close();\n }\n }}\n ></div>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}