@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

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

@@ -0,0 +1,461 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, wait, ScrollHandler, Type } from "../../utils/index";
+import { ListenToConfig } from "../../global/index";
+/**
+ * Modal displays content in a dialog overlay using the native dialog element.
+ * Supports both slot-based sub-components (ds-modal-header, ds-modal-body) and
+ * direct named slots (slot="header", slot="body").
+ *
+ * @slot header - The modal title content. Used automatically by ds-modal-header.
+ * @slot body - The modal body content. Used automatically by ds-modal-body.
+ * @slot actions - Action buttons rendered right-aligned at the bottom of the modal.
+ * @part dialog - The native dialog element.
+ * @part close - The close button.
+ * @part title - The h2 wrapping the header slot.
+ * @part body - The div wrapping the body slot.
+ * @part actions - The div wrapping the actions slot.
+ */
+export class Modal {
+    constructor() {
+        this.scrollHandler = new ScrollHandler();
+        this.animated = true;
+        this.isOpen = false;
+        this.transitionQueue = Promise.resolve();
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the modal is open.
+         */
+        this.open = false;
+        /**
+         * If `true`, the modal can be dismissed via Escape key, close button, and backdrop click.
+         */
+        this.closable = true;
+        /**
+         * Width of the modal in pixels.
+         */
+        this.modalWidth = 640;
+        /**
+         * If `true`, the modal covers the full viewport.
+         */
+        this.fullscreen = false;
+        this.handleCancel = (ev) => {
+            ev.preventDefault();
+            if (this.closable) {
+                this.open = false;
+            }
+        };
+        this.handleNativeClose = () => {
+            var _a;
+            // If the browser closed the dialog despite preventDefault (browser quirk),
+            // re-enter the top layer so the backdrop is restored.
+            if (this.open) {
+                (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.showModal();
+            }
+        };
+        this.handleBackdropClick = (ev) => {
+            if (this.closable && ev.target === this.dialogEl) {
+                this.open = false;
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    openChanged(newValue) {
+        if (newValue) {
+            this.runOpen();
+        }
+        else {
+            this.runClose();
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.scrollHandler.connect();
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.addEventListener('cancel', this.handleCancel);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('close', this.handleNativeClose);
+        if (this.open) {
+            this.runOpen();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('cancel', this.handleCancel);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('close', this.handleNativeClose);
+        this.scrollHandler.disconnect();
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the modal. */
+    async present() {
+        this.open = true;
+    }
+    /** Closes the modal. */
+    async dismiss() {
+        this.open = false;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.animated = state.animated;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    runOpen() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doOpen()).catch(() => undefined);
+    }
+    runClose() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doClose()).catch(() => undefined);
+    }
+    async doOpen() {
+        var _a, _b;
+        if ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open)
+            return;
+        this.dsWillPresent.emit();
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.showModal();
+        this.scrollHandler.disable();
+        this.isOpen = true;
+        if (this.animated) {
+            await wait(300);
+        }
+        this.dsDidPresent.emit();
+    }
+    async doClose() {
+        var _a, _b;
+        if (!((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open))
+            return;
+        this.dsWillDismiss.emit();
+        this.isOpen = false;
+        if (this.animated) {
+            await wait(300);
+        }
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
+        this.scrollHandler.enable();
+        this.dsDidDismiss.emit();
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: '62b900eb4c6d645d6ed18838b6e5f5230f34d2ba', class: {
+                'is-open': this.isOpen,
+                'is-animated': this.animated,
+                'is-fullscreen': this.fullscreen,
+            }, style: { '--_modal-width': `${this.modalWidth}px` } }, h("dialog", { key: '744edb0cc3a0af3bdc01fbaf2acd9108f1ea6ecf', part: "dialog", ref: el => (this.dialogEl = el), "aria-labelledby": "modal-title", "aria-describedby": "modal-body", onClick: this.handleBackdropClick }, this.closable && h("ds-close", { key: 'e0328f19021f81ba7f1a4ccb4b9a7c444f623509', part: "close", onClick: () => (this.open = false) }), h("h2", { key: 'c9e8363bf136aa21fbaae2120a32847ef6189dee', id: "modal-title", part: "title" }, h("slot", { key: '3b061b840fd0b98c07ad22210c78a1d5390ec055', name: "header" })), h("div", { key: '9ca6ff7d5216ef7ee8f179ba73ed10531e6e3ccc', id: "modal-body", part: "body" }, h("slot", { key: 'dece7c125221ad7465f70ddd29bc47741b444b0a', name: "body" })), h("div", { key: 'dc1980a3c0b1da4d8a37d50e2a4ab3e2e45516c3', id: "modal-actions", part: "actions" }, h("slot", { key: 'a79074f106e57cb89d39354b46a82842493c0a0c', name: "actions" })))));
+    }
+    static get is() { return "ds-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["modal.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["modal.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the modal is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the modal can be dismissed via Escape key, close button, and backdrop click."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "true"
+            },
+            "modalWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the modal in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-width",
+                "defaultValue": "640"
+            },
+            "fullscreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the modal covers the full viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fullscreen",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "animated": {},
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsWillPresent",
+                "name": "dsWillPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the modal opens."
+                },
+                "complexType": {
+                    "original": "ModalPresentDetail",
+                    "resolved": "void",
+                    "references": {
+                        "ModalPresentDetail": {
+                            "location": "import",
+                            "path": "./modal.interfaces",
+                            "id": "src/components/modal/modal.interfaces.ts::ModalPresentDetail",
+                            "referenceLocation": "ModalPresentDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsDidPresent",
+                "name": "dsDidPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the modal is fully open."
+                },
+                "complexType": {
+                    "original": "ModalPresentDetail",
+                    "resolved": "void",
+                    "references": {
+                        "ModalPresentDetail": {
+                            "location": "import",
+                            "path": "./modal.interfaces",
+                            "id": "src/components/modal/modal.interfaces.ts::ModalPresentDetail",
+                            "referenceLocation": "ModalPresentDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsWillDismiss",
+                "name": "dsWillDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the modal closes."
+                },
+                "complexType": {
+                    "original": "ModalDismissDetail",
+                    "resolved": "void",
+                    "references": {
+                        "ModalDismissDetail": {
+                            "location": "import",
+                            "path": "./modal.interfaces",
+                            "id": "src/components/modal/modal.interfaces.ts::ModalDismissDetail",
+                            "referenceLocation": "ModalDismissDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsDidDismiss",
+                "name": "dsDidDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the modal is fully closed."
+                },
+                "complexType": {
+                    "original": "ModalDismissDetail",
+                    "resolved": "void",
+                    "references": {
+                        "ModalDismissDetail": {
+                            "location": "import",
+                            "path": "./modal.interfaces",
+                            "id": "src/components/modal/modal.interfaces.ts::ModalDismissDetail",
+                            "referenceLocation": "ModalDismissDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "present": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the modal.",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the modal.",
+                    "tags": []
+                }
+            },
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}
+__decorate([
+    Logger('modal'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Modal.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Modal.prototype, "open", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Modal.prototype, "closable", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Modal.prototype, "modalWidth", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Modal.prototype, "fullscreen", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "configChanged", null);

package/dist/collection/components/modal/test/modal.a11y.play.js

@@ -0,0 +1,59 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('closed modal', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-modal id="modal">
+      <ds-modal-header>Modal Title</ds-modal-header>
+      <ds-modal-body><p>Modal body content.</p></ds-modal-body>
+    </ds-modal>
+  `);
+    await a11y('ds-modal');
+});
+test('open modal', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-modal id="modal" open>
+      <ds-modal-header>Modal Title</ds-modal-header>
+      <ds-modal-body><p>Modal body content.</p></ds-modal-body>
+    </ds-modal>
+  `);
+    await a11y('ds-modal');
+});
+test('open modal not closable', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-modal id="modal" open closable="false">
+      <ds-modal-header>Modal Title</ds-modal-header>
+      <ds-modal-body><p>Modal body content.</p></ds-modal-body>
+    </ds-modal>
+  `);
+    await a11y('ds-modal');
+});
+test('open modal with direct slots', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-modal id="modal" open>
+      <span slot="header">Modal Title</span>
+      <div slot="body"><p>Modal body content.</p></div>
+    </ds-modal>
+  `);
+    await a11y('ds-modal');
+});
+test('open fullscreen modal', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-modal id="modal" open fullscreen>
+      <ds-modal-header>Fullscreen Modal</ds-modal-header>
+      <ds-modal-body><p>This modal covers the entire viewport.</p></ds-modal-body>
+    </ds-modal>
+  `);
+    await a11y('ds-modal');
+});
+test('open fullscreen modal not closable', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-modal id="modal" open fullscreen closable="false">
+      <ds-modal-header>Fullscreen — Must Confirm</ds-modal-header>
+      <ds-modal-body><p>Escape and backdrop click are disabled.</p></ds-modal-body>
+      <ds-button color="primary" slot="actions">Got it</ds-button>
+    </ds-modal>
+  `);
+    await a11y('ds-modal');
+});