@siemens/ix 0.0.0-20240419081748

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

@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .steps {
+  display: flex;
+}
+:host .steps.vertical {
+  display: block;
+}

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

@@ -0,0 +1,176 @@
+/*
+ * 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 { h, Host, } from "@stencil/core";
+import { createMutationObserver } from "../utils/mutation-observer";
+export class WorkflowSteps {
+    constructor() {
+        this.vertical = false;
+        this.clickable = false;
+        this.selectedIndex = 0;
+    }
+    getSteps() {
+        return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
+    }
+    updateSteps() {
+        let steps = this.getSteps();
+        steps.forEach((element, index) => {
+            element.vertical = this.vertical;
+            element.clickable = this.clickable;
+            element.selected = this.selectedIndex === index;
+            if (steps.length === 1) {
+                element.position = 'single';
+                return;
+            }
+            if (index === 0) {
+                element.position = 'first';
+            }
+            else if (index === steps.length - 1) {
+                element.position = 'last';
+            }
+            else {
+                element.position = 'undefined';
+            }
+        });
+    }
+    onStepSelectionChanged(event) {
+        const eventTarget = event.detail;
+        const steps = this.getSteps();
+        const clickIndex = steps.findIndex((step) => step === eventTarget);
+        const clientEvent = this.stepSelected.emit(clickIndex);
+        if (clientEvent.defaultPrevented) {
+            return;
+        }
+        steps.forEach((step, index) => {
+            step.selected = index === clickIndex;
+        });
+    }
+    componentWillLoad() {
+        this.updateSteps();
+    }
+    componentDidLoad() {
+        this.observer = createMutationObserver((mutations) => {
+            for (let mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    this.updateSteps();
+                }
+            }
+        });
+        this.observer.observe(this.hostElement, { childList: true });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    componentDidRender() {
+        this.updateSteps();
+    }
+    render() {
+        return (h(Host, { key: 'fadad485a71a3366872450c53c089d6f4b79702d' }, h("div", { key: 'eda4300c1de1abe221e2051e2d38f3509e682fbe', class: { steps: true, vertical: this.vertical } }, h("slot", { key: 'c79f023401cc03cc5de9117d00de66885987085a' }))));
+    }
+    static get is() { return "ix-workflow-steps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["workflow-steps.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["workflow-steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Select orientation"
+                },
+                "attribute": "vertical",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Activate navigation click"
+                },
+                "attribute": "clickable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectedIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Activate navigation click"
+                },
+                "attribute": "selected-index",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "stepSelected",
+                "name": "stepSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On step selected event"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "selectedChanged",
+                "method": "onStepSelectionChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=workflow-steps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-steps.js","sourceRoot":"","sources":["../../../../src/components/workflow-steps/workflow-steps.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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-workflow-steps',\n  styleUrl: 'workflow-steps.scss',\n  shadow: true,\n})\nexport class WorkflowSteps {\n  @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() selectedIndex: number = 0;\n\n  /**\n   * On step selected event\n   */\n  @Event() stepSelected: EventEmitter<number>;\n\n  private getSteps() {\n    return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n  }\n\n  updateSteps() {\n    let steps = this.getSteps();\n    steps.forEach((element, index) => {\n      element.vertical = this.vertical;\n      element.clickable = this.clickable;\n      element.selected = this.selectedIndex === index;\n\n      if (steps.length === 1) {\n        element.position = 'single';\n        return;\n      }\n\n      if (index === 0) {\n        element.position = 'first';\n      } else if (index === steps.length - 1) {\n        element.position = 'last';\n      } else {\n        element.position = 'undefined';\n      }\n    });\n  }\n\n  private observer: MutationObserver;\n\n  @Listen('selectedChanged')\n  onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {\n    const eventTarget = event.detail;\n\n    const steps = this.getSteps();\n    const clickIndex = steps.findIndex((step) => step === eventTarget);\n    const clientEvent = this.stepSelected.emit(clickIndex);\n\n    if (clientEvent.defaultPrevented) {\n      return;\n    }\n\n    steps.forEach((step, index) => {\n      step.selected = index === clickIndex;\n    });\n  }\n\n  componentWillLoad() {\n    this.updateSteps();\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver((mutations) => {\n      for (let mutation of mutations) {\n        if (mutation.type === 'childList') {\n          this.updateSteps();\n        }\n      }\n    });\n\n    this.observer.observe(this.hostElement, { childList: true });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentDidRender() {\n    this.updateSteps();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ steps: true, vertical: this.vertical }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+export * from './components/category-filter/filter-state';
+export * from './components/category-filter/input-state';
+export * from './components/category-filter/logical-filter-operator';
+export { FlipTileState } from './components/flip-tile/flip-tile-state';
+export * from './components/toast/toast-utils';
+export * from './components/tree-item/default-tree-item';
+export * from './components/tree/tree-model';
+export * from './components/upload/upload-file-state';
+export * from './components/utils/delegate';
+export * from './components/utils/modal';
+export { convertToAbbreviationString, convertToRemString, } from './components/utils/rwd.util';
+export * from './components/utils/theme-switcher';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,2CAA2C,CAAC;AAC1D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0CAA0C,CAAC;AACzD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AAEzC,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,cAAc,mCAAmC,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 */\n\nexport * from './components/category-filter/filter-state';\nexport * from './components/category-filter/input-state';\nexport * from './components/category-filter/logical-filter-operator';\nexport { FlipTileState } from './components/flip-tile/flip-tile-state';\nexport * from './components/toast/toast-utils';\nexport * from './components/tree-item/default-tree-item';\nexport * from './components/tree/tree-model';\nexport * from './components/upload/upload-file-state';\nexport * from './components/utils/delegate';\nexport * from './components/utils/modal';\nexport { NotificationColor } from './components/utils/notification-color';\nexport {\n  convertToAbbreviationString,\n  convertToRemString,\n} from './components/utils/rwd.util';\nexport * from './components/utils/theme-switcher';\n"]}

package/dist/collection/setup.js

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+async function setupIcons() {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const iconComponent = window.customElements.get('ix-icon');
+    if (iconComponent) {
+        return;
+    }
+    console.warn('ix-icon web component not loaded. Using local fallback version');
+    const ixIcons = await import('@siemens/ix-icons/loader');
+    await ixIcons.defineCustomElements();
+}
+export default async function () {
+    await setupIcons();
+}
+//# sourceMappingURL=setup.js.map

package/dist/collection/setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../src/setup.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,KAAK,UAAU,UAAU;IACvB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO;IACT,CAAC;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC3D,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO;IACT,CAAC;IAED,OAAO,CAAC,IAAI,CACV,gEAAgE,CACjE,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,0BAA0B,CAAC,CAAC;IACzD,MAAM,OAAO,CAAC,oBAAoB,EAAE,CAAC;AACvC,CAAC;AAED,MAAM,CAAC,OAAO,CAAC,KAAK;IAClB,MAAM,UAAU,EAAE,CAAC;AACrB,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 */\n\nasync function setupIcons() {\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  const iconComponent = window.customElements.get('ix-icon');\n  if (iconComponent) {\n    return;\n  }\n\n  console.warn(\n    'ix-icon web component not loaded. Using local fallback version'\n  );\n\n  const ixIcons = await import('@siemens/ix-icons/loader');\n  await ixIcons.defineCustomElements();\n}\n\nexport default async function () {\n  await setupIcons();\n}\n"]}

package/dist/collection/tests/action-card/action-card.e2e.js

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+import { expect } from "@playwright/test";
+import { regressionTest } from "../utils/test/index";
+regressionTest.describe('action card: basic', () => {
+    regressionTest('should not have visual regressions', async ({ page }) => {
+        await page.goto('action-card/basic');
+        await page.waitForTimeout(1000);
+        expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    });
+    regressionTest('should have selected state', async ({ page }) => {
+        await page.goto('action-card/selected');
+        await page.waitForTimeout(1000);
+        expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=action-card.e2e.js.map

package/dist/collection/tests/action-card/action-card.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-card.e2e.js","sourceRoot":"","sources":["../../../../src/tests/action-card/action-card.e2e.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACjD,cAAc,CAAC,oCAAoC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACtE,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACrC,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAEhC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9D,MAAM,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAChC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;AACL,CAAC,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 */\n\nimport { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest.describe('action card: basic', () => {\n  regressionTest('should not have visual regressions', async ({ page }) => {\n    await page.goto('action-card/basic');\n    await page.waitForTimeout(1000);\n\n    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n  });\n\n  regressionTest('should have selected state', async ({ page }) => {\n    await page.goto('action-card/selected');\n    await page.waitForTimeout(1000);\n    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/tests/application/application-switch/genetic-data.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 960c-92.8 0-160-200-160-448S419.2 64 512 64s160 200 160 448-67.2 448-160 448z m0-32c65.6 0 128-185.6 128-416S577.6 96 512 96s-128 185.6-128 416 62.4 416 128 416z" fill="#050D42" /><path d="M124.8 736c-48-80 92.8-238.4 307.2-363.2S852.8 208 899.2 288 806.4 526.4 592 651.2 171.2 816 124.8 736z m27.2-16c33.6 57.6 225.6 17.6 424-97.6S905.6 361.6 872 304 646.4 286.4 448 401.6 118.4 662.4 152 720z" fill="#050D42" /><path d="M899.2 736c-46.4 80-254.4 38.4-467.2-84.8S76.8 368 124.8 288s254.4-38.4 467.2 84.8S947.2 656 899.2 736z m-27.2-16c33.6-57.6-97.6-203.2-296-318.4S184 246.4 152 304 249.6 507.2 448 622.4s392 155.2 424 97.6z" fill="#050D42" /><path d="M512 592c-44.8 0-80-35.2-80-80s35.2-80 80-80 80 35.2 80 80-35.2 80-80 80zM272 312c-27.2 0-48-20.8-48-48s20.8-48 48-48 48 20.8 48 48-20.8 48-48 48zM416 880c-27.2 0-48-20.8-48-48s20.8-48 48-48 48 20.8 48 48-20.8 48-48 48z m448-432c-27.2 0-48-20.8-48-48s20.8-48 48-48 48 20.8 48 48-20.8 48-48 48z" fill="#2F4BFF" /></svg>

package/dist/collection/tests/application/application-switch/square-play.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+ // 16pxls (c) by Paul mackenzie <paul@whatspauldoing.com>
+ //
+ // 16pxls is licensed under a
+ // Creative Commons Attribution-ShareAlike 4.0 International License.
+ //
+ // You should have received a copy of the license along with this
+ // work. If not, see <http://creativecommons.org/licenses/by-sa/4.0/>.
+-->
+
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 16h16V0H0v16zm2-2V2h12v12H2zm4-3l5-3-5-3v6z" fill-rule="evenodd"/>
+</svg>

package/dist/collection/tests/application/application.e2e.js

@@ -0,0 +1,191 @@
+/*
+ * 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.
+ */
+import { expect } from "@playwright/test";
+import { regressionTest, test, viewPorts } from "../utils/test/index";
+regressionTest.describe('basic navigation large', () => {
+    regressionTest('basic', async ({ page }) => {
+        await page.goto('application/basic');
+        await page.setViewportSize(viewPorts.lg);
+        await page.waitForTimeout(500);
+        await page.locator('ix-menu ix-menu-expand-icon').click();
+        await page.waitForSelector('ix-menu ix-menu-expand-icon.expanded');
+        await page.waitForTimeout(1000);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+    regressionTest('content width', async ({ page }) => {
+        await page.goto('application/content-width');
+        await page.setViewportSize(viewPorts.lg);
+        await page.waitForTimeout(500);
+        await page.locator('ix-menu ix-menu-expand-icon').click();
+        await page.waitForSelector('ix-menu ix-menu-expand-icon.expanded');
+        await expect(page.getByText('Example content')).toBeVisible();
+        await page.waitForTimeout(1000);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+});
+regressionTest.describe('basic navigation', () => {
+    regressionTest('basic', async ({ page }) => {
+        await page.goto('application/basic');
+        await page.setViewportSize(viewPorts.md);
+        await page.waitForTimeout(1000);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+    regressionTest('content width', async ({ page }) => {
+        await page.goto('application/content-width');
+        await page.setViewportSize(viewPorts.md);
+        await page.waitForTimeout(500);
+        await expect(page.getByText('Example content')).toBeVisible();
+        await page.waitForTimeout(1000);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+    regressionTest('expanded', async ({ page }) => {
+        await page.goto('application/basic');
+        await page.setViewportSize(viewPorts.md);
+        await page.waitForTimeout(500);
+        await page.locator('ix-menu ix-menu-expand-icon').click();
+        await page.waitForSelector('ix-menu ix-menu-expand-icon.expanded');
+        await expect(page.locator('ix-menu').locator('.menu.expanded')).toBeVisible();
+        await page.waitForTimeout(1000);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+});
+regressionTest.describe('basic navigation mobile', () => {
+    regressionTest('mobile', async ({ page }) => {
+        await page.goto('application/mobile');
+        await page.setViewportSize(viewPorts.sm);
+        await page.waitForTimeout(1000);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+    regressionTest('mobile expanded', async ({ page }) => {
+        regressionTest.skip(!!process.env['CI'], 'TODO: Fix flaky behavior on github runner');
+        await page.goto('application/mobile');
+        await page.setViewportSize(viewPorts.sm);
+        await page.waitForTimeout(500);
+        const menuElement = await page.waitForSelector('ix-application-header ix-menu-expand-icon');
+        await menuElement.click();
+        await expect(page.locator('ix-menu').locator('.menu.expanded')).toBeVisible();
+        await page.waitForTimeout(1000);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+    regressionTest('mobile overlay', async ({ page }) => {
+        await page.goto('application/mobile');
+        await page.setViewportSize(viewPorts.sm);
+        await page.waitForTimeout(500);
+        const menuElement = await page.waitForSelector('ix-application-header ix-menu-expand-icon');
+        await menuElement.click();
+        await expect(page.locator('ix-menu').locator('.menu.expanded')).toBeVisible();
+        const settingsButton = await page.waitForSelector('ix-menu-item#settings');
+        await settingsButton.click();
+        const settings = page.locator('ix-menu-settings');
+        const settingsTitle = settings.locator('h2');
+        await expect(settings).toBeVisible();
+        await expect(settingsTitle).toBeVisible();
+        await page.waitForTimeout(1000);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+    test('mobile expanded overlay', async ({ page, mount }) => {
+        await mount(`
+      <ix-application>
+        <ix-application-header name="Test">
+          <div slot="logo">LOGO</div>
+        </ix-application-header>
+        <ix-menu>
+          <ix-menu-item>Test 1</ix-menu-item>
+          <ix-menu-item>Test 1</ix-menu-item>
+          <ix-menu-item>Test 1</ix-menu-item>
+          <ix-menu-settings>
+            <ix-menu-settings-item>Item 1</ix-menu-settings-item>
+            <ix-menu-settings-item>Item 1</ix-menu-settings-item>
+            <ix-menu-settings-item>Item 1</ix-menu-settings-item>
+          </ix-menu-settings>
+        </ix-menu>
+        <div class="debug-element"></div>
+      </ix-application>
+      `);
+        await page.setViewportSize(viewPorts.sm);
+        // Animation
+        await page.waitForTimeout(500);
+        const toggleMenuButton = page.locator('ix-menu-expand-icon').nth(0);
+        await expect(toggleMenuButton).toBeVisible();
+        await toggleMenuButton.click();
+        const menu = page.locator('ix-menu');
+        await expect(menu).toHaveClass(/expanded/);
+        // Animation
+        await page.waitForTimeout(500);
+        const settings = page.locator('ix-menu-item#settings');
+        await settings.click({
+            force: true,
+        });
+        // Animation
+        await page.waitForTimeout(500);
+        await expect(menu).not.toHaveClass(/expanded/);
+        const settingsOverlay = page.locator('ix-menu-settings');
+        await expect(settingsOverlay).toBeVisible();
+        await toggleMenuButton.click();
+        await expect(menu).toHaveClass(/expanded/);
+        // Animation
+        await page.waitForTimeout(500);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+});
+regressionTest.describe('application-switch', () => {
+    regressionTest('modal', async ({ page }) => {
+        await page.goto('application/application-switch');
+        const appSwitchButton = page.getByRole('button', { name: 'Apps' });
+        await appSwitchButton.click();
+        await page.waitForTimeout(1000);
+        const modal = page.locator('ix-modal');
+        await expect(modal).toHaveClass(/hydrated/);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+});
+Object.keys(viewPorts).forEach((viewPort) => {
+    regressionTest(`MenuSidebar ${viewPort}`, async ({ page }) => {
+        await page.setViewportSize(viewPorts[viewPort]);
+        await page.goto('application/application-switch');
+        const toggleMenuButton = page.locator('ix-menu-expand-icon').nth(0);
+        await toggleMenuButton.click();
+        await expect(page.locator('ix-menu')).toHaveClass(/expanded/);
+        await expect(page).toHaveScreenshot({
+            fullPage: true,
+            animations: 'disabled',
+        });
+    });
+});
+//# sourceMappingURL=application.e2e.js.map

package/dist/collection/tests/application/application.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"application.e2e.js","sourceRoot":"","sources":["../../../../src/tests/application/application.e2e.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 */\n\nimport { expect } from '@playwright/test';\nimport { regressionTest, test, viewPorts } from '@utils/test';\n\nregressionTest.describe('basic navigation large', () => {\n  regressionTest('basic', async ({ page }) => {\n    await page.goto('application/basic');\n    await page.setViewportSize(viewPorts.lg);\n    await page.waitForTimeout(500);\n\n    await page.locator('ix-menu ix-menu-expand-icon').click();\n    await page.waitForSelector('ix-menu ix-menu-expand-icon.expanded');\n\n    await page.waitForTimeout(1000);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n\n  regressionTest('content width', async ({ page }) => {\n    await page.goto('application/content-width');\n    await page.setViewportSize(viewPorts.lg);\n    await page.waitForTimeout(500);\n\n    await page.locator('ix-menu ix-menu-expand-icon').click();\n    await page.waitForSelector('ix-menu ix-menu-expand-icon.expanded');\n\n    await expect(page.getByText('Example content')).toBeVisible();\n\n    await page.waitForTimeout(1000);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n});\n\nregressionTest.describe('basic navigation', () => {\n  regressionTest('basic', async ({ page }) => {\n    await page.goto('application/basic');\n    await page.setViewportSize(viewPorts.md);\n\n    await page.waitForTimeout(1000);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n\n  regressionTest('content width', async ({ page }) => {\n    await page.goto('application/content-width');\n    await page.setViewportSize(viewPorts.md);\n    await page.waitForTimeout(500);\n\n    await expect(page.getByText('Example content')).toBeVisible();\n\n    await page.waitForTimeout(1000);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n\n  regressionTest('expanded', async ({ page }) => {\n    await page.goto('application/basic');\n    await page.setViewportSize(viewPorts.md);\n    await page.waitForTimeout(500);\n\n    await page.locator('ix-menu ix-menu-expand-icon').click();\n    await page.waitForSelector('ix-menu ix-menu-expand-icon.expanded');\n\n    await expect(\n      page.locator('ix-menu').locator('.menu.expanded')\n    ).toBeVisible();\n\n    await page.waitForTimeout(1000);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n});\n\nregressionTest.describe('basic navigation mobile', () => {\n  regressionTest('mobile', async ({ page }) => {\n    await page.goto('application/mobile');\n    await page.setViewportSize(viewPorts.sm);\n\n    await page.waitForTimeout(1000);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n\n  regressionTest('mobile expanded', async ({ page }) => {\n    regressionTest.skip(\n      !!process.env['CI'],\n      'TODO: Fix flaky behavior on github runner'\n    );\n\n    await page.goto('application/mobile');\n    await page.setViewportSize(viewPorts.sm);\n\n    await page.waitForTimeout(500);\n    const menuElement = await page.waitForSelector(\n      'ix-application-header ix-menu-expand-icon'\n    );\n    await menuElement.click();\n\n    await expect(\n      page.locator('ix-menu').locator('.menu.expanded')\n    ).toBeVisible();\n\n    await page.waitForTimeout(1000);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n\n  regressionTest('mobile overlay', async ({ page }) => {\n    await page.goto('application/mobile');\n    await page.setViewportSize(viewPorts.sm);\n\n    await page.waitForTimeout(500);\n    const menuElement = await page.waitForSelector(\n      'ix-application-header ix-menu-expand-icon'\n    );\n    await menuElement.click();\n    await expect(\n      page.locator('ix-menu').locator('.menu.expanded')\n    ).toBeVisible();\n\n    const settingsButton = await page.waitForSelector('ix-menu-item#settings');\n    await settingsButton.click();\n\n    const settings = page.locator('ix-menu-settings');\n    const settingsTitle = settings.locator('h2');\n\n    await expect(settings).toBeVisible();\n    await expect(settingsTitle).toBeVisible();\n\n    await page.waitForTimeout(1000);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n\n  test('mobile expanded overlay', async ({ page, mount }) => {\n    await mount(\n      `\n      <ix-application>\n        <ix-application-header name=\"Test\">\n          <div slot=\"logo\">LOGO</div>\n        </ix-application-header>\n        <ix-menu>\n          <ix-menu-item>Test 1</ix-menu-item>\n          <ix-menu-item>Test 1</ix-menu-item>\n          <ix-menu-item>Test 1</ix-menu-item>\n          <ix-menu-settings>\n            <ix-menu-settings-item>Item 1</ix-menu-settings-item>\n            <ix-menu-settings-item>Item 1</ix-menu-settings-item>\n            <ix-menu-settings-item>Item 1</ix-menu-settings-item>\n          </ix-menu-settings>\n        </ix-menu>\n        <div class=\"debug-element\"></div>\n      </ix-application>\n      `\n    );\n\n    await page.setViewportSize(viewPorts.sm);\n\n    // Animation\n    await page.waitForTimeout(500);\n\n    const toggleMenuButton = page.locator('ix-menu-expand-icon').nth(0);\n    await expect(toggleMenuButton).toBeVisible();\n    await toggleMenuButton.click();\n\n    const menu = page.locator('ix-menu');\n    await expect(menu).toHaveClass(/expanded/);\n\n    // Animation\n    await page.waitForTimeout(500);\n\n    const settings = page.locator('ix-menu-item#settings');\n    await settings.click({\n      force: true,\n    });\n    // Animation\n    await page.waitForTimeout(500);\n    await expect(menu).not.toHaveClass(/expanded/);\n\n    const settingsOverlay = page.locator('ix-menu-settings');\n    await expect(settingsOverlay).toBeVisible();\n\n    await toggleMenuButton.click();\n    await expect(menu).toHaveClass(/expanded/);\n\n    // Animation\n    await page.waitForTimeout(500);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n});\n\nregressionTest.describe('application-switch', () => {\n  regressionTest('modal', async ({ page }) => {\n    await page.goto('application/application-switch');\n\n    const appSwitchButton = page.getByRole('button', { name: 'Apps' });\n    await appSwitchButton.click();\n\n    await page.waitForTimeout(1000);\n    const modal = page.locator('ix-modal');\n    await expect(modal).toHaveClass(/hydrated/);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n});\n\nObject.keys(viewPorts).forEach((viewPort) => {\n  regressionTest(`MenuSidebar ${viewPort}`, async ({ page }) => {\n    await page.setViewportSize(viewPorts[viewPort]);\n    await page.goto('application/application-switch');\n\n    const toggleMenuButton = page.locator('ix-menu-expand-icon').nth(0);\n\n    await toggleMenuButton.click();\n\n    await expect(page.locator('ix-menu')).toHaveClass(/expanded/);\n\n    await expect(page).toHaveScreenshot({\n      fullPage: true,\n      animations: 'disabled',\n    });\n  });\n});\n"]}

package/dist/collection/tests/application-header/application-header.e2e.js

@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+import { expect } from "@playwright/test";
+import { regressionTest, viewPorts } from "../utils/test/index";
+regressionTest.describe('application header: basic', () => {
+    regressionTest('should not have visual regressions', async ({ page }) => {
+        await page.goto('application-header/basic');
+        await expect(page).toHaveScreenshot();
+    });
+    regressionTest('should not have visual regressions - svg', async ({ page }) => {
+        await page.goto('application-header/basic-svg');
+        await expect(page).toHaveScreenshot();
+    });
+    regressionTest('should content', async ({ page }) => {
+        await page.setViewportSize(viewPorts.lg);
+        await page.goto('application-header/overflow');
+        await expect(page).toHaveScreenshot();
+    });
+    regressionTest('should content - sm', async ({ page }) => {
+        await page.setViewportSize(viewPorts.sm);
+        await page.goto('application-header/overflow');
+        await expect(page).toHaveScreenshot();
+    });
+    regressionTest('should content - sm - click context menu', async ({ page }) => {
+        await page.setViewportSize(viewPorts.sm);
+        await page.goto('application-header/overflow');
+        const contextMenu = page
+            .locator('ix-application-header')
+            .locator('[data-context-menu]');
+        await expect(contextMenu).toBeVisible();
+        await contextMenu.click();
+        const dropdown = page
+            .locator('ix-application-header')
+            .locator('[data-overflow-dropdown]');
+        await expect(dropdown).toBeVisible();
+        await expect(page).toHaveScreenshot();
+    });
+});
+//# sourceMappingURL=application-header.e2e.js.map