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

package/dist/collection/components/validation-tooltip/validation-tooltip.js

@@ -0,0 +1,250 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { arrow, autoUpdate, computePosition, flip, inline, offset, shift, } from "@floating-ui/dom";
+import { h, Host } from "@stencil/core";
+/**
+ * @slot tooltip-message - Custom tooltip message with html support
+ *
+ * @deprecated Will be removed with 4.0.0
+ */
+export class ValidationTooltip {
+    constructor() {
+        /**
+         * 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" }))));
+    }
+    static get is() { return "ix-validation-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["validation-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["validation-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "attribute": "message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message of the tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "placement": {
+                "type": "string",
+                "attribute": "placement",
+                "mutable": false,
+                "complexType": {
+                    "original": "Side",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "Side": {
+                            "location": "import",
+                            "path": "../dropdown/placement",
+                            "id": "src/components/dropdown/placement.ts::Side"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placement of the tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "suppressAutomaticPlacement": {
+                "type": "boolean",
+                "attribute": "suppress-automatic-placement",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Suppress the automatic placement of the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isInputValid": {},
+            "tooltipPosition": {},
+            "arrowPosition": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "isInputValid",
+                "methodName": "validationChanged"
+            }];
+    }
+}
+//# sourceMappingURL=validation-tooltip.js.map

package/dist/collection/components/validation-tooltip/validation-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-tooltip.js","sourceRoot":"","sources":["../../../src/components/validation-tooltip/validation-tooltip.tsx"],"names":[],"mappings":"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","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 */\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"]}

package/dist/collection/components/workflow-step/workflow-step.js

@@ -62,7 +62,8 @@ export class WorkflowStep {
                 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;
@@ -108,18 +109,18 @@ export class WorkflowStep {
     }
     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' })))));
     }
     static get is() { return "ix-workflow-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/workflow-step/workflow-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-step.js","sourceRoot":"","sources":["../../../src/components/workflow-step/workflow-step.tsx"],"names":[],"mappings":"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","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\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":"workflow-step.js","sourceRoot":"","sources":["../../../src/components/workflow-step/workflow-step.tsx"],"names":[],"mappings":"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","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\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"]}

package/dist/collection/components/workflow-steps/workflow-steps.js

@@ -81,7 +81,7 @@ export class WorkflowSteps {
         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' }))));
     }
     static get is() { return "ix-workflow-steps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/tests/utils/test/page.js

@@ -69,8 +69,8 @@ export const regressionTest = testBase.extend({
     page: async ({ page }, use, testInfo) => {
         page = await extendPageFixture(page, testInfo);
         await page.route('*/**/svg/*.svg', async (route, request) => {
-            if (process.env.CI !== 'true') {
-                const [, svg] = request.url().split('/svg/');
+            if (!process.env.CI) {
+                const [__, svg] = request.url().split('/svg/');
                 console.warn(testInfo.file, testInfo.title, 'SVGs fetched by static path', svg);
                 expect(false, 'SVGs fetched by static path').toBe(true);
             }

package/dist/collection/tests/utils/test/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../src/tests/utils/test/page.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAIL,IAAI,IAAI,QAAQ,EAEhB,MAAM,GACP,MAAM,kBAAkB,CAAC;AAe1B,KAAK,UAAU,iBAAiB,CAAC,IAAU,EAAE,QAAkB;;IAC7D,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,MAAA,MAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,0CAAG,eAAe,CAAC,mCAAI,SAAS,CAAC;IAC9E,MAAM,iBAAiB,GACrB,MAAA,MAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,0CAAG,sBAAsB,CAAC,mCAAI,MAAM,CAAC;IAChE,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;QACxB,IAAI,EAAE,GAAG,WAAW,IAAI,iBAAiB,EAAE;KAC5C,CAAC,CAAC;IACH,IAAI,CAAC,IAAI,GAAG,KAAK,EAAE,GAAW,EAAE,OAAO,EAAE,EAAE;QACzC,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;YACpC,OAAO,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QACpC,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,YAAY,CACjC,mCAAmC,GAAG,kBAAkB,WAAW,yBAAyB,iBAAiB,EAAE,EAC/G,OAAO,CACR,CAAC;QAEF,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAChC,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAEF,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,OAA+B,EAAE,EAAE;QAC1D,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAC/B,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,KAAK,UAAU,cAAc,CAC3B,IAAU,EACV,QAAgB,EAChB,MAGC;IAED,OAAO,IAAI,CAAC,cAAc,CACxB,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,EAAE,EAAE;QACtC,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE,CAAC;YACrB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC5C,IAAI,CAAC,IAAI,EAAE,CAAC;oBACV,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;gBACxD,CAAC;gBAED,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC;YACxB,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAC;YAClB,MAAM,YAAY,GAAG,MAAM,MAAM;YAC/B,6CAA6C;YAC7C,mDAAmD,CACpD,CAAC;YACF,MAAM,QAAQ,GAAqB,YAAY,CAAC,QAAQ,CAAC;YACzD,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACpD,UAAU,CAAC,GAAG,GAAG,kCAAkC,CAAC;QACpD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAEtC,MAAM,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;YAClC,UAAU,CAAC,MAAM,GAAG,KAAK,IAAI,EAAE;gBAC7B,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAE/C,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAC3D,CAAC;QAED,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;QACpC,OAAO,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAgB,CAAC;IAC/C,CAAC,EACD,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,EAAE,CACxC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAY1C;IACD,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;QACtC,IAAI,GAAG,MAAM,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAE/C,MAAM,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;YAC1D,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,KAAK,MAAM,EAAE,CAAC;gBAC9B,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBAC7C,OAAO,CAAC,IAAI,CACV,QAAQ,CAAC,IAAI,EACb,QAAQ,CAAC,KAAK,EACd,6BAA6B,EAC7B,GAAG,CACJ,CAAC;gBAEF,MAAM,CAAC,KAAK,EAAE,6BAA6B,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1D,CAAC;YAED,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IACD,aAAa,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;QACrC,GAAG,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,CACzB,IAAI,CAAC,cAAc,CACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC/B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAE7C,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YAC5B,CAAC;YAED,OAAO,GAAG,CAAC;QACb,CAAC,EACD;YACE,QAAQ;YACR,QAAQ;SACT,CACF,CACF,CAAC;IACJ,CAAC;IACD,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,QAAkB,EAAE,EAAE;;QACjD,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC;QAC9B,MAAM,WAAW,GACf,MAAA,MAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,0CAAG,eAAe,CAAC,mCAAI,SAAS,CAAC;QAC5D,MAAM,iBAAiB,GACrB,MAAA,MAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,0CAAG,sBAAsB,CAAC,mCAAI,MAAM,CAAC;QAChE,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;YACxB,IAAI,EAAE,GAAG,WAAW,IAAI,iBAAiB,EAAE;SAC5C,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,IAAI,CACb,qEAAqE,WAAW,yBAAyB,iBAAiB,EAAE,CAC7H,CAAC;QACF,MAAM,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1E,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,cAAc,CAAC","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 */\nimport {\n  ElementHandle,\n  Page,\n  PageScreenshotOptions,\n  test as testBase,\n  TestInfo as _TestInfo,\n  expect,\n} from '@playwright/test';\nimport type { addIcons as _addIcons } from '@siemens/ix-icons';\n\ninterface TestInfo extends _TestInfo {\n  componentTest?: boolean;\n}\n\nexport type Mount = (\n  selector: string,\n  config?: {\n    headTags?: string[];\n    icons?: Record<string, string>;\n  }\n) => Promise<ElementHandle<HTMLElement>>;\n\nasync function extendPageFixture(page: Page, testInfo: TestInfo) {\n  const originalGoto = page.goto.bind(page);\n  const originalScreenshot = page.screenshot.bind(page);\n  const dataIxTheme = testInfo.project.metadata?.['data-ix-theme'] ?? 'classic';\n  const dataIxColorSchema =\n    testInfo.project.metadata?.['data-ix-color-schema'] ?? 'dark';\n  testInfo.annotations.push({\n    type: `${dataIxTheme} ${dataIxColorSchema}`,\n  });\n  page.goto = async (url: string, options) => {\n    if (testInfo.componentTest === true) {\n      return originalGoto(url, options);\n    }\n\n    const response = await originalGoto(\n      `http://127.0.0.1:8080/src/tests/${url}?data-ix-theme=${dataIxTheme}&data-ix-color-schema=${dataIxColorSchema}`,\n      options\n    );\n\n    await page.waitForTimeout(1000);\n    return response;\n  };\n\n  page.screenshot = async (options?: PageScreenshotOptions) => {\n    await page.waitForTimeout(150);\n    return originalScreenshot(options);\n  };\n\n  return page;\n}\n\nasync function mountComponent(\n  page: Page,\n  selector: string,\n  config?: {\n    headTags?: string[];\n    icons?: Record<string, string>;\n  }\n): Promise<ElementHandle<HTMLElement>> {\n  return page.evaluateHandle(\n    async ({ componentSelector, config }) => {\n      if (config?.headTags) {\n        config.headTags.forEach((tag) => {\n          const head = document.querySelector('head');\n          if (!head) {\n            throw new Error('No head tag found in the document.');\n          }\n\n          head.innerHTML += tag;\n        });\n      }\n\n      if (config?.icons) {\n        const moduleImport = await import(\n          //@ts-expect-error - Only existing on runtime\n          '/www/node_modules/@siemens/ix-icons/dist/index.js'\n        );\n        const addIcons: typeof _addIcons = moduleImport.addIcons;\n        addIcons(config.icons);\n      }\n\n      const loadScript = document.createElement('script');\n      loadScript.src = '/scripts/e2e/load-e2e-runtime.js';\n      document.body.appendChild(loadScript);\n\n      await new Promise<void>((resolve) => {\n        loadScript.onload = async () => {\n          resolve();\n        };\n      });\n\n      await window.customElements.whenDefined('ix-button');\n      const mount = document.querySelector('#mount');\n\n      if (!mount) {\n        throw new Error('No mount point found in the document.');\n      }\n\n      mount.innerHTML = componentSelector;\n      return mount.children.item(0) as HTMLElement;\n    },\n    { componentSelector: selector, config }\n  );\n}\n\nexport const regressionTest = testBase.extend<{\n  mount: (\n    selector: string,\n    config?: {\n      headTags?: string[];\n      icons?: Record<string, string>;\n    }\n  ) => Promise<ElementHandle<HTMLElement>>;\n  createElement: (\n    selector: string,\n    appendTo?: ElementHandle<Element>\n  ) => Promise<ElementHandle<HTMLElement>>;\n}>({\n  page: async ({ page }, use, testInfo) => {\n    page = await extendPageFixture(page, testInfo);\n\n    await page.route('*/**/svg/*.svg', async (route, request) => {\n      if (process.env.CI !== 'true') {\n        const [, svg] = request.url().split('/svg/');\n        console.warn(\n          testInfo.file,\n          testInfo.title,\n          'SVGs fetched by static path',\n          svg\n        );\n\n        expect(false, 'SVGs fetched by static path').toBe(true);\n      }\n\n      return route.continue();\n    });\n\n    await use(page);\n  },\n  createElement: async ({ page }, use) => {\n    use((selector, appendTo) =>\n      page.evaluateHandle(\n        async ({ selector, appendTo }) => {\n          const elm = document.createElement(selector);\n\n          if (appendTo) {\n            appendTo.appendChild(elm);\n          }\n\n          return elm;\n        },\n        {\n          selector,\n          appendTo,\n        }\n      )\n    );\n  },\n  mount: async ({ page }, use, testInfo: TestInfo) => {\n    testInfo.componentTest = true;\n    const dataIxTheme =\n      testInfo.project.metadata?.['data-ix-theme'] ?? 'classic';\n    const dataIxColorSchema =\n      testInfo.project.metadata?.['data-ix-color-schema'] ?? 'dark';\n    testInfo.annotations.push({\n      type: `${dataIxTheme} ${dataIxColorSchema}`,\n    });\n    await page.goto(\n      `http://127.0.0.1:8080/src/tests/utils/ct/index.html?data-ix-theme=${dataIxTheme}&data-ix-color-schema=${dataIxColorSchema}`\n    );\n    await use((selector, config) => mountComponent(page, selector, config));\n  },\n});\n\nexport const test = regressionTest;\n"]}
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../src/tests/utils/test/page.ts"],"names":[],"mappings":"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","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 */\nimport {\n  ElementHandle,\n  Page,\n  PageScreenshotOptions,\n  test as testBase,\n  TestInfo as _TestInfo,\n  expect,\n} from '@playwright/test';\nimport type { addIcons as _addIcons } from '@siemens/ix-icons';\n\ninterface TestInfo extends _TestInfo {\n  componentTest?: boolean;\n}\n\nexport type Mount = (\n  selector: string,\n  config?: {\n    headTags?: string[];\n    icons?: Record<string, string>;\n  }\n) => Promise<ElementHandle<HTMLElement>>;\n\nasync function extendPageFixture(page: Page, testInfo: TestInfo) {\n  const originalGoto = page.goto.bind(page);\n  const originalScreenshot = page.screenshot.bind(page);\n  const dataIxTheme = testInfo.project.metadata?.['data-ix-theme'] ?? 'classic';\n  const dataIxColorSchema =\n    testInfo.project.metadata?.['data-ix-color-schema'] ?? 'dark';\n  testInfo.annotations.push({\n    type: `${dataIxTheme} ${dataIxColorSchema}`,\n  });\n  page.goto = async (url: string, options) => {\n    if (testInfo.componentTest === true) {\n      return originalGoto(url, options);\n    }\n\n    const response = await originalGoto(\n      `http://127.0.0.1:8080/src/tests/${url}?data-ix-theme=${dataIxTheme}&data-ix-color-schema=${dataIxColorSchema}`,\n      options\n    );\n\n    await page.waitForTimeout(1000);\n    return response;\n  };\n\n  page.screenshot = async (options?: PageScreenshotOptions) => {\n    await page.waitForTimeout(150);\n    return originalScreenshot(options);\n  };\n\n  return page;\n}\n\nasync function mountComponent(\n  page: Page,\n  selector: string,\n  config?: {\n    headTags?: string[];\n    icons?: Record<string, string>;\n  }\n): Promise<ElementHandle<HTMLElement>> {\n  return page.evaluateHandle(\n    async ({ componentSelector, config }) => {\n      if (config?.headTags) {\n        config.headTags.forEach((tag) => {\n          const head = document.querySelector('head');\n          if (!head) {\n            throw new Error('No head tag found in the document.');\n          }\n\n          head.innerHTML += tag;\n        });\n      }\n\n      if (config?.icons) {\n        const moduleImport = await import(\n          //@ts-expect-error - Only existing on runtime\n          '/www/node_modules/@siemens/ix-icons/dist/index.js'\n        );\n        const addIcons: typeof _addIcons = moduleImport.addIcons;\n        addIcons(config.icons);\n      }\n\n      const loadScript = document.createElement('script');\n      loadScript.src = '/scripts/e2e/load-e2e-runtime.js';\n      document.body.appendChild(loadScript);\n\n      await new Promise<void>((resolve) => {\n        loadScript.onload = async () => {\n          resolve();\n        };\n      });\n\n      await window.customElements.whenDefined('ix-button');\n      const mount = document.querySelector('#mount');\n\n      if (!mount) {\n        throw new Error('No mount point found in the document.');\n      }\n\n      mount.innerHTML = componentSelector;\n      return mount.children.item(0) as HTMLElement;\n    },\n    { componentSelector: selector, config }\n  );\n}\n\nexport const regressionTest = testBase.extend<{\n  mount: (\n    selector: string,\n    config?: {\n      headTags?: string[];\n      icons?: Record<string, string>;\n    }\n  ) => Promise<ElementHandle<HTMLElement>>;\n  createElement: (\n    selector: string,\n    appendTo?: ElementHandle<Element>\n  ) => Promise<ElementHandle<HTMLElement>>;\n}>({\n  page: async ({ page }, use, testInfo) => {\n    page = await extendPageFixture(page, testInfo);\n\n    await page.route('*/**/svg/*.svg', async (route, request) => {\n      if (!process.env.CI) {\n        const [__, svg] = request.url().split('/svg/');\n        console.warn(\n          testInfo.file,\n          testInfo.title,\n          'SVGs fetched by static path',\n          svg\n        );\n\n        expect(false, 'SVGs fetched by static path').toBe(true);\n      }\n\n      return route.continue();\n    });\n\n    await use(page);\n  },\n  createElement: async ({ page }, use) => {\n    use((selector, appendTo) =>\n      page.evaluateHandle(\n        async ({ selector, appendTo }) => {\n          const elm = document.createElement(selector);\n\n          if (appendTo) {\n            appendTo.appendChild(elm);\n          }\n\n          return elm;\n        },\n        {\n          selector,\n          appendTo,\n        }\n      )\n    );\n  },\n  mount: async ({ page }, use, testInfo: TestInfo) => {\n    testInfo.componentTest = true;\n    const dataIxTheme =\n      testInfo.project.metadata?.['data-ix-theme'] ?? 'classic';\n    const dataIxColorSchema =\n      testInfo.project.metadata?.['data-ix-color-schema'] ?? 'dark';\n    testInfo.annotations.push({\n      type: `${dataIxTheme} ${dataIxColorSchema}`,\n    });\n    await page.goto(\n      `http://127.0.0.1:8080/src/tests/utils/ct/index.html?data-ix-theme=${dataIxTheme}&data-ix-color-schema=${dataIxColorSchema}`\n    );\n    await use((selector, config) => mountComponent(page, selector, config));\n  },\n});\n\nexport const test = regressionTest;\n"]}

package/dist/esm/find-element-CFRrPFxi.js

@@ -0,0 +1,103 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Will try to resolve the selector in the light dom, shadow dom or slot
+ * @param selector The selector to resolve
+ * @param hostElement The element to start the search from
+ * @returns Promise with the resolved elements or undefined if not found
+ */
+async function resolveSelector(selector, hostElement) {
+    const elements = Array.from(document.querySelectorAll(selector));
+    if (elements.length > 0) {
+        return Promise.resolve(elements);
+    }
+    if (hostElement === undefined) {
+        return Promise.resolve(undefined);
+    }
+    const shadowRoot = getRootFor(hostElement);
+    if (shadowRoot === undefined || !(shadowRoot instanceof ShadowRoot)) {
+        return Promise.resolve(undefined);
+    }
+    const elementsInShadowRoot = Array.from(shadowRoot.querySelectorAll(selector));
+    const elementsInHost = Array.from(shadowRoot.host.querySelectorAll(selector));
+    const elementsInComponent = [
+        ...elementsInHost,
+        ...elementsInShadowRoot,
+    ];
+    if (elementsInComponent.length > 0) {
+        return Promise.resolve(elementsInComponent);
+    }
+    return Promise.resolve(undefined);
+}
+/**
+ * Walk up the DOM to find the nearest shadow root
+ * @param element The element to get the root for
+ * @param parent This will determine how far up the DOM to travel to find the root
+ * @returns The root element
+ */
+function getRootFor(element, parent = document.body) {
+    if (!element.parentElement && !element.parentNode) {
+        return undefined;
+    }
+    if (element.parentNode instanceof ShadowRoot) {
+        return element.parentNode;
+    }
+    let currentNode = element.parentElement;
+    while (currentNode) {
+        if (currentNode.shadowRoot) {
+            return currentNode.shadowRoot;
+        }
+        else if (currentNode.parentNode instanceof ShadowRoot) {
+            return currentNode.parentNode;
+        }
+        currentNode = currentNode.parentElement;
+    }
+    return parent;
+}
+function waitForSelector(selector, node = document, hostElement) {
+    return new Promise((resolve) => {
+        const waitForElements = () => {
+            resolveSelector(selector, hostElement).then((elements) => {
+                if (elements && elements.length > 0) {
+                    resolve(elements[0]);
+                    observer === null || observer === void 0 ? void 0 : observer.disconnect();
+                }
+            });
+        };
+        waitForElements();
+        const observer = new MutationObserver(() => {
+            waitForElements();
+        });
+        observer.observe(node.body, {
+            childList: true,
+            subtree: true,
+        });
+    });
+}
+/**
+ * Find an element by ID or reference
+ * @param element The element to find
+ * @param hostElement The element to start the search from
+ * @returns A promise that will resolve to the element
+ */
+function findElement(element, hostElement) {
+    if (element instanceof Promise) {
+        return element;
+    }
+    if (typeof element === 'object') {
+        return Promise.resolve(element);
+    }
+    const selector = `#${element}`;
+    return waitForSelector(selector, document, hostElement);
+}
+
+export { findElement as f, resolveSelector as r };
+//# sourceMappingURL=find-element-CFRrPFxi.js.map
+
+//# sourceMappingURL=find-element-CFRrPFxi.js.map

package/dist/esm/find-element-CFRrPFxi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-element-CFRrPFxi.js","sources":["src/components/utils/find-element.ts"],"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/**\n * Will try to resolve the selector in the light dom, shadow dom or slot\n * @param selector The selector to resolve\n * @param hostElement The element to start the search from\n * @returns Promise with the resolved elements or undefined if not found\n */\nexport async function resolveSelector(\n  selector: string,\n  hostElement?: HTMLElement\n): Promise<HTMLElement[] | undefined> {\n  const elements: HTMLElement[] = Array.from(\n    document.querySelectorAll(selector)\n  );\n\n  if (elements.length > 0) {\n    return Promise.resolve(elements);\n  }\n\n  if (hostElement === undefined) {\n    return Promise.resolve(undefined);\n  }\n\n  const shadowRoot = getRootFor(hostElement);\n\n  if (shadowRoot === undefined || !(shadowRoot instanceof ShadowRoot)) {\n    return Promise.resolve(undefined);\n  }\n\n  const elementsInShadowRoot: HTMLElement[] = Array.from(\n    shadowRoot.querySelectorAll(selector)\n  );\n\n  const elementsInHost: HTMLElement[] = Array.from(\n    shadowRoot.host.querySelectorAll(selector)\n  );\n\n  const elementsInComponent: HTMLElement[] = [\n    ...elementsInHost,\n    ...elementsInShadowRoot,\n  ];\n\n  if (elementsInComponent.length > 0) {\n    return Promise.resolve(elementsInComponent);\n  }\n\n  return Promise.resolve(undefined);\n}\n\n/**\n * Walk up the DOM to find the nearest shadow root\n * @param element The element to get the root for\n * @param parent This will determine how far up the DOM to travel to find the root\n * @returns The root element\n */\nexport function getRootFor(element: HTMLElement, parent = document.body) {\n  if (!element.parentElement && !element.parentNode) {\n    return undefined;\n  }\n\n  if (element.parentNode instanceof ShadowRoot) {\n    return element.parentNode;\n  }\n\n  let currentNode = element.parentElement;\n\n  while (currentNode) {\n    if (currentNode.shadowRoot) {\n      return currentNode.shadowRoot;\n    } else if (currentNode.parentNode instanceof ShadowRoot) {\n      return currentNode.parentNode;\n    }\n\n    currentNode = currentNode.parentElement;\n  }\n\n  return parent;\n}\n\nexport function waitForSelector(\n  selector: string,\n  node = document,\n  hostElement?: HTMLElement\n): Promise<Element> {\n  return new Promise((resolve) => {\n    const waitForElements = () => {\n      resolveSelector(selector, hostElement).then((elements) => {\n        if (elements && elements.length > 0) {\n          resolve(elements[0]);\n          observer?.disconnect();\n        }\n      });\n    };\n\n    waitForElements();\n\n    const observer = new MutationObserver(() => {\n      waitForElements();\n    });\n\n    observer.observe(node.body, {\n      childList: true,\n      subtree: true,\n    });\n  });\n}\n\n/**\n * Find an element by ID or reference\n * @param element The element to find\n * @param hostElement The element to start the search from\n * @returns A promise that will resolve to the element\n */\nexport function findElement(\n  element: string | HTMLElement | Promise<HTMLElement>,\n  hostElement?: HTMLElement\n): Promise<Element> {\n  if (element instanceof Promise) {\n    return element;\n  }\n\n  if (typeof element === 'object') {\n    return Promise.resolve(element);\n  }\n\n  const selector = `#${element}`;\n  return waitForSelector(selector, document, hostElement);\n}\n"],"names":[],"mappings":"AAAA;;;;;;;AAOG;AAEH;;;;;AAKG;AACI,eAAe,eAAe,CACnC,QAAgB,EAChB,WAAyB,EAAA;AAEzB,IAAA,MAAM,QAAQ,GAAkB,KAAK,CAAC,IAAI,CACxC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CACpC;AAED,IAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AACvB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;;AAGlC,IAAA,IAAI,WAAW,KAAK,SAAS,EAAE;AAC7B,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;;AAGnC,IAAA,MAAM,UAAU,GAAG,UAAU,CAAC,WAAW,CAAC;IAE1C,IAAI,UAAU,KAAK,SAAS,IAAI,EAAE,UAAU,YAAY,UAAU,CAAC,EAAE;AACnE,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;;AAGnC,IAAA,MAAM,oBAAoB,GAAkB,KAAK,CAAC,IAAI,CACpD,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CACtC;AAED,IAAA,MAAM,cAAc,GAAkB,KAAK,CAAC,IAAI,CAC9C,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAC3C;AAED,IAAA,MAAM,mBAAmB,GAAkB;AACzC,QAAA,GAAG,cAAc;AACjB,QAAA,GAAG,oBAAoB;KACxB;AAED,IAAA,IAAI,mBAAmB,CAAC,MAAM,GAAG,CAAC,EAAE;AAClC,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,mBAAmB,CAAC;;AAG7C,IAAA,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;AACnC;AAEA;;;;;AAKG;AACG,SAAU,UAAU,CAAC,OAAoB,EAAE,MAAM,GAAG,QAAQ,CAAC,IAAI,EAAA;IACrE,IAAI,CAAC,OAAO,CAAC,aAAa,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AACjD,QAAA,OAAO,SAAS;;AAGlB,IAAA,IAAI,OAAO,CAAC,UAAU,YAAY,UAAU,EAAE;QAC5C,OAAO,OAAO,CAAC,UAAU;;AAG3B,IAAA,IAAI,WAAW,GAAG,OAAO,CAAC,aAAa;IAEvC,OAAO,WAAW,EAAE;AAClB,QAAA,IAAI,WAAW,CAAC,UAAU,EAAE;YAC1B,OAAO,WAAW,CAAC,UAAU;;AACxB,aAAA,IAAI,WAAW,CAAC,UAAU,YAAY,UAAU,EAAE;YACvD,OAAO,WAAW,CAAC,UAAU;;AAG/B,QAAA,WAAW,GAAG,WAAW,CAAC,aAAa;;AAGzC,IAAA,OAAO,MAAM;AACf;AAEM,SAAU,eAAe,CAC7B,QAAgB,EAChB,IAAI,GAAG,QAAQ,EACf,WAAyB,EAAA;AAEzB,IAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;QAC7B,MAAM,eAAe,GAAG,MAAK;YAC3B,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,KAAI;gBACvD,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AACnC,oBAAA,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACpB,oBAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,UAAU,EAAE;;AAE1B,aAAC,CAAC;AACJ,SAAC;AAED,QAAA,eAAe,EAAE;AAEjB,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACzC,YAAA,eAAe,EAAE;AACnB,SAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AAC1B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;AACJ,KAAC,CAAC;AACJ;AAEA;;;;;AAKG;AACa,SAAA,WAAW,CACzB,OAAoD,EACpD,WAAyB,EAAA;AAEzB,IAAA,IAAI,OAAO,YAAY,OAAO,EAAE;AAC9B,QAAA,OAAO,OAAO;;AAGhB,IAAA,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;AAC/B,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;;AAGjC,IAAA,MAAM,QAAQ,GAAG,CAAI,CAAA,EAAA,OAAO,EAAE;IAC9B,OAAO,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC;AACzD;;;;"}