@siemens/ix 0.0.0-20240419081748

package/dist/collection/components/modal/modal.js

@@ -0,0 +1,447 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/*
+ * 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 anime from "animejs";
+import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
+import Animation from "../utils/animation";
+import { OnListener } from "../utils/listener";
+import { waitForElement } from "../utils/waitForElement";
+export class Modal {
+    constructor() {
+        this.ariaAttributes = {};
+        this.size = '360';
+        this.animation = true;
+        this.backdrop = true;
+        this.closeOnBackdropClick = false;
+        this.beforeDismiss = undefined;
+        this.centered = false;
+        this.keyboard = true;
+        this.closeOnEscape = true;
+        this.modalVisible = false;
+    }
+    onKey(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+        }
+    }
+    get dialog() {
+        return this.hostElement.shadowRoot.querySelector('dialog');
+    }
+    slideInModal() {
+        const duration = this.animation ? Animation.mediumTime : 0;
+        let transformY = this.centered ? '-50%' : 40;
+        anime({
+            targets: this.dialog,
+            duration,
+            opacity: [0, 1],
+            translateY: [0, transformY],
+            translateX: ['-50%', '-50%'],
+            easing: 'easeOutSine',
+        });
+    }
+    slideOutModal(completeCallback) {
+        const duration = this.animation ? Animation.mediumTime : 0;
+        let transformY = this.centered ? '-50%' : 40;
+        anime({
+            targets: this.dialog,
+            duration,
+            opacity: [1, 0],
+            translateY: [transformY, 0],
+            translateX: ['-50%', '-50%'],
+            easing: 'easeInSine',
+            complete: () => {
+                if (completeCallback) {
+                    completeCallback();
+                }
+            },
+        });
+    }
+    onModalClick(event) {
+        if (event.target !== this.dialog) {
+            return;
+        }
+        const rect = this.dialog.getBoundingClientRect();
+        const isClickOutside = rect.top <= event.clientY &&
+            event.clientY <= rect.top + rect.height &&
+            rect.left <= event.clientX &&
+            event.clientX <= rect.left + rect.width;
+        if (!isClickOutside && this.closeOnBackdropClick) {
+            this.dismissModal();
+        }
+    }
+    /**
+     * Show the dialog
+     */
+    async showModal() {
+        try {
+            const dialog = await waitForElement('dialog', this.hostElement.shadowRoot);
+            this.modalVisible = true;
+            dialog.showModal();
+        }
+        catch (e) {
+            console.error('HTMLDialogElement not existing');
+        }
+    }
+    /**
+     * Dismiss the dialog
+     */
+    async dismissModal(reason) {
+        let allowDismiss = true;
+        if (this.beforeDismiss !== undefined) {
+            allowDismiss = await this.beforeDismiss(reason);
+        }
+        if (!allowDismiss) {
+            return;
+        }
+        this.slideOutModal(() => {
+            this.modalVisible = false;
+            this.dialog.close(JSON.stringify({
+                type: 'dismiss',
+                reason,
+            }, null, 2));
+            this.dialogDismiss.emit(reason);
+        });
+    }
+    /**
+     * Close the dialog
+     */
+    async closeModal(reason) {
+        this.slideOutModal(() => {
+            this.dialog.close(JSON.stringify({
+                type: 'close',
+                reason,
+            }, null, 2));
+            this.dialogClose.emit(reason);
+        });
+    }
+    componentDidLoad() {
+        this.slideInModal();
+    }
+    componentWillLoad() {
+        this.ariaAttributes = a11yHostAttributes(this.hostElement);
+    }
+    render() {
+        return (h(Host, { key: '567694260986bea7c1ba8b63f00f5035b03b8961', class: {
+                visible: this.modalVisible,
+                'no-backdrop': this.backdrop === false,
+                'align-center': this.centered,
+            } }, h("div", { key: '8a6149cbd64c7007e0492df375242d6fc8e54f0b', class: "dialog-backdrop" }, h("dialog", { key: '4ef88c174fc5066d2075929aa770fe17f68a5bec', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+                modal: true,
+                [`modal-size-${this.size}`]: true,
+            }, onClose: () => this.dismissModal(), onClick: (event) => this.onModalClick(event), onCancel: (e) => {
+                e.preventDefault();
+                this.dismissModal();
+            } }, h("slot", { key: '08d753b7ec1679b13fa4052a302d873efbdf381c' })))));
+    }
+    static get is() { return "ix-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IxModalSize",
+                    "resolved": "\"360\" | \"480\" | \"600\" | \"720\" | \"840\" | \"full-screen\" | \"full-width\"",
+                    "references": {
+                        "IxModalSize": {
+                            "location": "local",
+                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/modal/modal.tsx",
+                            "id": "src/components/modal/modal.tsx::IxModalSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.0.0"
+                        }],
+                    "text": "Modal size"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'360'"
+            },
+            "animation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should the modal be animated"
+                },
+                "attribute": "animation",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "backdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a backdrop behind the modal dialog"
+                },
+                "attribute": "backdrop",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "closeOnBackdropClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.0.0"
+                        }],
+                    "text": "Dismiss modal on backdrop click"
+                },
+                "attribute": "close-on-backdrop-click",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "beforeDismiss": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(reason?: any) => boolean | Promise<boolean>",
+                    "resolved": "(reason?: any) => boolean | Promise<boolean>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is called before the modal is dismissed.\n\n- Return `true` to proceed in dismissing the modal\n- Return `false` to abort in dismissing the modal"
+                }
+            },
+            "centered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Centered modal"
+                },
+                "attribute": "centered",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "keyboard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "- Use closeOnEscape instead"
+                        }],
+                    "text": "Use ESC to dismiss the modal"
+                },
+                "attribute": "keyboard",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true the modal can be closed by pressing the Escape key"
+                },
+                "attribute": "close-on-escape",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "modalVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dialogClose",
+                "name": "dialogClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog close"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dialogDismiss",
+                "name": "dialogDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog cancel"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showModal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDialogElement": {
+                            "location": "global",
+                            "id": "global::HTMLDialogElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show the dialog",
+                    "tags": []
+                }
+            },
+            "dismissModal": {
+                "complexType": {
+                    "signature": "<T = any>(reason?: T) => Promise<void>",
+                    "parameters": [{
+                            "name": "reason",
+                            "type": "T",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Dismiss the dialog",
+                    "tags": []
+                }
+            },
+            "closeModal": {
+                "complexType": {
+                    "signature": "<T = any>(reason: T) => Promise<void>",
+                    "parameters": [{
+                            "name": "reason",
+                            "type": "T",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the dialog",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+__decorate([
+    OnListener('keydown', (self) => !self.closeOnEscape || !self.keyboard)
+], Modal.prototype, "onKey", null);
+//# sourceMappingURL=modal.js.map

package/dist/collection/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.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  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   *\n   * @since 2.0.0\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   *\n   * @since 2.0.0\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Use ESC to dismiss the modal\n   * @deprecated - Use closeOnEscape instead\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * If set to true the modal can be closed by pressing the Escape key\n   */\n  @Prop() closeOnEscape = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss: EventEmitter;\n\n  @State() modalVisible = false;\n\n  @OnListener<Modal>('keydown', (self) => !self.closeOnEscape || !self.keyboard)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    if (event.target !== this.dialog) {\n      return;\n    }\n\n    const rect = this.dialog.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/modal/test/modal.ct.js

@@ -0,0 +1,118 @@
+/*
+ * 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 { expect } from "@playwright/test";
+import { test } from "../../../tests/utils/test/index";
+test('closes on Escape key down', async ({ mount, page }) => {
+    await mount(``);
+    await page.evaluate(() => {
+        return new Promise((resolve) => {
+            const script = document.createElement('script');
+            script.type = 'module';
+            script.innerHTML = `
+        import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
+        window.showModal = ix.showModal;
+      `;
+            document.body.appendChild(script);
+            resolve();
+        });
+    });
+    await page.waitForTimeout(1000);
+    await page.evaluate(() => {
+        const elm = document.createElement('ix-modal');
+        elm.innerHTML = `
+      <ix-modal-header>Title</ix-modal-header>
+      <ix-modal-content>Content</ix-modal-header>
+    `;
+        window.showModal({
+            content: elm,
+        });
+    });
+    const dialog = page.locator('ix-modal dialog');
+    await expect(dialog).toBeVisible();
+    await page.locator('ix-modal-content').click();
+    await page.keyboard.down('Escape');
+    await expect(dialog).not.toBeVisible();
+});
+test.describe('closeOnBackdropClick = true', () => {
+    test('should close modal on backdrop click', async ({ mount, page }) => {
+        await mount(`
+      <ix-button>Some background noise</ix-button>
+    `);
+        await page.evaluate(() => {
+            return new Promise((resolve) => {
+                const script = document.createElement('script');
+                script.type = 'module';
+                script.innerHTML = `
+          import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
+          window.showModal = ix.showModal;
+        `;
+                document.getElementById('mount').appendChild(script);
+                function createModalExample() {
+                    const el = document.createElement('DIV');
+                    el.style.display = 'contents';
+                    el.innerHTML = `<ix-toggle id="toggle"></ix-toggle>`;
+                    return el;
+                }
+                setTimeout(() => {
+                    window.showModal({
+                        content: createModalExample(),
+                        closeOnBackdropClick: true,
+                    });
+                    resolve();
+                }, 2000);
+            });
+        });
+        // needed to skip fade out / in animation
+        await page.waitForTimeout(500);
+        const toggle = page.locator('#toggle');
+        await expect(toggle).toBeVisible();
+        await page.mouse.click(20, 20);
+        // needed to skip fade out / in animation
+        await page.waitForTimeout(500);
+        await expect(page.locator('ix-modal dialog')).not.toBeVisible();
+    });
+    test('should stay open after interacting with input elements', async ({ mount, page, }) => {
+        await mount(`
+      <ix-button>Some background noise</ix-button>
+    `);
+        await page.evaluate(() => {
+            return new Promise((resolve) => {
+                const script = document.createElement('script');
+                script.type = 'module';
+                script.innerHTML = `
+          import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
+          window.showModal = ix.showModal;
+        `;
+                document.getElementById('mount').appendChild(script);
+                function createModalExample() {
+                    const el = document.createElement('DIV');
+                    el.style.display = 'contents';
+                    el.innerHTML = `<ix-toggle id="toggle"></ix-toggle>`;
+                    return el;
+                }
+                setTimeout(() => {
+                    window.showModal({
+                        content: createModalExample(),
+                        closeOnBackdropClick: true,
+                    });
+                    resolve();
+                }, 2000);
+            });
+        });
+        // needed to skip fade out / in animation
+        await page.waitForTimeout(500);
+        const toggle = page.locator('#toggle');
+        await expect(toggle).toBeVisible();
+        await toggle.locator('input').press('Space');
+        // needed to skip fade out / in animation
+        await page.waitForTimeout(500);
+        await expect(page.locator('ix-modal dialog')).toBeVisible();
+    });
+});
+//# sourceMappingURL=modal.ct.js.map

package/dist/collection/components/modal/test/modal.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.ct.js","sourceRoot":"","sources":["../../../../../src/components/modal/test/modal.ct.ts"],"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 { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ndeclare global {\n  interface Window {\n    showModal: any;\n  }\n}\n\ntest('closes on Escape key down', async ({ mount, page }) => {\n  await mount(``);\n\n  await page.evaluate(() => {\n    return new Promise<void>((resolve) => {\n      const script = document.createElement('script');\n      script.type = 'module';\n      script.innerHTML = `\n        import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n        window.showModal = ix.showModal;\n      `;\n      document.body.appendChild(script);\n      resolve();\n    });\n  });\n\n  await page.waitForTimeout(1000);\n\n  await page.evaluate(() => {\n    const elm = document.createElement('ix-modal');\n    elm.innerHTML = `\n      <ix-modal-header>Title</ix-modal-header>\n      <ix-modal-content>Content</ix-modal-header>\n    `;\n    window.showModal({\n      content: elm,\n    });\n  });\n  const dialog = page.locator('ix-modal dialog');\n  await expect(dialog).toBeVisible();\n  await page.locator('ix-modal-content').click();\n  await page.keyboard.down('Escape');\n\n  await expect(dialog).not.toBeVisible();\n});\n\ntest.describe('closeOnBackdropClick = true', () => {\n  test('should close modal on backdrop click', async ({ mount, page }) => {\n    await mount(`\n      <ix-button>Some background noise</ix-button>\n    `);\n\n    await page.evaluate(() => {\n      return new Promise<void>((resolve) => {\n        const script = document.createElement('script');\n        script.type = 'module';\n        script.innerHTML = `\n          import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n          window.showModal = ix.showModal;\n        `;\n\n        document.getElementById('mount').appendChild(script);\n\n        function createModalExample() {\n          const el = document.createElement('DIV');\n          el.style.display = 'contents';\n          el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n          return el;\n        }\n\n        setTimeout(() => {\n          window.showModal({\n            content: createModalExample(),\n            closeOnBackdropClick: true,\n          });\n\n          resolve();\n        }, 2000);\n      });\n    });\n\n    // needed to skip fade out / in animation\n    await page.waitForTimeout(500);\n\n    const toggle = page.locator('#toggle');\n    await expect(toggle).toBeVisible();\n\n    await page.mouse.click(20, 20);\n\n    // needed to skip fade out / in animation\n    await page.waitForTimeout(500);\n    await expect(page.locator('ix-modal dialog')).not.toBeVisible();\n  });\n\n  test('should stay open after interacting with input elements', async ({\n    mount,\n    page,\n  }) => {\n    await mount(`\n      <ix-button>Some background noise</ix-button>\n    `);\n\n    await page.evaluate(() => {\n      return new Promise<void>((resolve) => {\n        const script = document.createElement('script');\n        script.type = 'module';\n        script.innerHTML = `\n          import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n          window.showModal = ix.showModal;\n        `;\n\n        document.getElementById('mount').appendChild(script);\n\n        function createModalExample() {\n          const el = document.createElement('DIV');\n          el.style.display = 'contents';\n          el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n          return el;\n        }\n\n        setTimeout(() => {\n          window.showModal({\n            content: createModalExample(),\n            closeOnBackdropClick: true,\n          });\n\n          resolve();\n        }, 2000);\n      });\n    });\n\n    // needed to skip fade out / in animation\n    await page.waitForTimeout(500);\n\n    const toggle = page.locator('#toggle');\n    await expect(toggle).toBeVisible();\n\n    await toggle.locator('input').press('Space');\n\n    // needed to skip fade out / in animation\n    await page.waitForTimeout(500);\n    await expect(page.locator('ix-modal dialog')).toBeVisible();\n  });\n});\n"]}

package/dist/collection/components/modal-content/modal-content.css

@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+/*
+ * 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 */
+  display: block;
+  position: relative;
+  overflow: auto;
+  padding: 0.25rem 0.75rem;
+}
+: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;
+}