@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/collection/components/overlays/modal/test/modal.component.play.js

@@ -0,0 +1,196 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsModal, expect, test } from "../../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test('should render ds-modal with sub-components', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Test Title</ds-modal-header>
+        <ds-modal-body><p>Body content</p></ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeVisible();
+    });
+    test('should open modal on present()', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeClosed();
+        await page.evaluate(() => {
+            const modal = document.querySelector('ds-modal');
+            return modal.present();
+        });
+        await dsModal.assertToBeOpen();
+    });
+    test('should close modal on dismiss()', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await page.evaluate(() => {
+            const modal = document.querySelector('ds-modal');
+            return modal.dismiss();
+        });
+        await dsModal.assertToBeClosed();
+    });
+    test('should emit dsWillPresent and dsDidPresent on open', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        const willPresent = await dsModal.el.spyOnEvent('dsWillPresent');
+        const didPresent = await dsModal.el.spyOnEvent('dsDidPresent');
+        await page.evaluate(() => {
+            const modal = document.querySelector('ds-modal');
+            return modal.present();
+        });
+        expect(willPresent).toHaveReceivedEventTimes(1);
+        expect(didPresent).toHaveReceivedEventTimes(1);
+    });
+    test('should emit dsWillDismiss and dsDidDismiss on close', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        const willDismiss = await dsModal.el.spyOnEvent('dsWillDismiss');
+        const didDismiss = await dsModal.el.spyOnEvent('dsDidDismiss');
+        await page.evaluate(() => {
+            const modal = document.querySelector('ds-modal');
+            return modal.dismiss();
+        });
+        expect(willDismiss).toHaveReceivedEventTimes(1);
+        expect(didDismiss).toHaveReceivedEventTimes(1);
+    });
+    test('should close on close button click when closable=true', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await dsModal.clickClose();
+        await dsModal.assertToBeClosed();
+    });
+    test('should not render close button when closable=false', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open closable="false">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await expect(dsModal.close.el).not.toBeAttached();
+    });
+    test('should close on backdrop click when closable=true', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        // Click the top-left corner of the viewport, which lands on the <dialog> backdrop
+        // area (outside the centred modal box). ev.target === dialogEl triggers close.
+        await page.mouse.click(5, 5);
+        await dsModal.assertToBeClosed();
+    });
+    test('should not close on Escape when closable=false', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open closable="false">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await page.keyboard.press('Escape');
+        await dsModal.assertToBeOpen();
+    });
+    test('should support direct named slots without sub-components', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <span slot="header">Direct Title</span>
+        <div slot="body"><p>Direct body</p></div>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await dsModal.assertTitleText('Direct Title');
+    });
+    test('should assign ds-modal-header to header slot', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>My Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const slotValue = await page.evaluate(() => {
+            var _a;
+            return (_a = document.querySelector('ds-modal-header')) === null || _a === void 0 ? void 0 : _a.slot;
+        });
+        expect(slotValue).toBe('header');
+    });
+    test('should assign ds-modal-body to body slot', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const slotValue = await page.evaluate(() => {
+            var _a;
+            return (_a = document.querySelector('ds-modal-body')) === null || _a === void 0 ? void 0 : _a.slot;
+        });
+        expect(slotValue).toBe('body');
+    });
+    test('should apply is-fullscreen class when fullscreen=true', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" fullscreen>
+        <ds-modal-header>Fullscreen</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        await page.evaluate(() => document.querySelector('ds-modal').present());
+        await expect(page.locator('ds-modal')).toHaveClass(/is-fullscreen/);
+    });
+    test('should not apply is-fullscreen class when fullscreen=false', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Normal</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        await expect(page.locator('ds-modal')).not.toHaveClass(/is-fullscreen/);
+    });
+    test('fullscreen modal should not close on Escape when closable=false', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open fullscreen closable="false">
+        <ds-modal-header>Fullscreen</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await page.keyboard.press('Escape');
+        await dsModal.assertToBeOpen();
+    });
+});

package/dist/collection/components/overlays/modal/test/modal.ssr.play.js

@@ -0,0 +1,17 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsModal, mountSsr, test } from "../../../../../../../playwright/src/index";
+import { renderToString } from "@baloise/ds-core/hydrate";
+test.describe('ssr', () => {
+    test('renders and hydrates', async ({ page }, testInfo) => {
+        await mountSsr(page, `
+        <ds-modal id="modal">
+          <ds-modal-header>Test Title</ds-modal-header>
+          <ds-modal-body><p>Body content</p></ds-modal-body>
+        </ds-modal>
+      `, renderToString, testInfo);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeClosed();
+    });
+});

package/dist/collection/components/overlays/modal/test/modal.visual.play.js

@@ -0,0 +1,36 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsModal, expectScreenshot, screenshot, test } from "../../../../../../../playwright/src/index";
+const TAG = 'modal';
+const VARIANTS = [
+    { testId: 'basic', modalId: 'modal-basic' },
+    { testId: 'not-closable', modalId: 'modal-not-closable' },
+    { testId: 'direct-slots', modalId: 'modal-direct' },
+    { testId: 'narrow', modalId: 'modal-narrow' },
+    { testId: 'wide', modalId: 'modal-wide' },
+    { testId: 'rich-content', modalId: 'modal-rich' },
+    { testId: 'scrollable', modalId: 'modal-scrollable' },
+    { testId: 'fullscreen', modalId: 'modal-fullscreen' },
+    { testId: 'fullscreen-not-closable', modalId: 'modal-fullscreen-nc' },
+];
+const image = screenshot(TAG);
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/overlays/${TAG}/test/${TAG}.visual.html`);
+    });
+    VARIANTS.forEach(({ testId, modalId }) => {
+        test(testId, async ({ page }) => {
+            const section = page.getByTestId(testId);
+            await section.getByRole('button').first().click();
+            const modal = new DsModal(page.locator(`ds-modal#${modalId}`));
+            await modal.assertToBeOpen();
+            await expectScreenshot(page.locator('body'), image(testId));
+            await page.evaluate((id) => {
+                const el = document.getElementById(id);
+                return el === null || el === void 0 ? void 0 : el.dismiss();
+            }, modalId);
+            await modal.assertToBeClosed();
+        });
+    });
+});

package/dist/collection/components/overlays/notification/notification.js

@@ -0,0 +1,361 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { stopEventBubbling, Logger, byTagName, directChildren, hasValue, OneOf, Type } from "../../../utils/index";
+import { NOTIFICATION_COLORS, NOTIFICATION_SIZES, } from "./notification.interfaces";
+/**
+ * Notification presents inline feedback messages for success, warning, error, or informational states with optional close action.
+ *
+ * @slot - The notification message content.
+ * @part section - The notification container element.
+ * @part close - The close button.
+ * @part heading - The notification heading.
+ */
+export class Notification {
+    constructor() {
+        this.didLoad = false;
+        this.hasBrandIcon = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * If `true` the notification will be displayed as an alert, otherwise as a status message.
+         */
+        this.alert = false;
+        /**
+         * If `true` the notification can be closed by the user.
+         */
+        this.closable = false;
+        /**
+         * @internal Handler for on close event
+         */
+        this.closeHandler = () => void 0;
+        /**
+         * Defines the heading of the notification.
+         */
+        this.heading = '';
+        /**
+         * If `true` there will be no icon provided
+         */
+        this.noIcon = false;
+        /**
+         * PRIVATE METHODS
+         * ─────────────────────────────────────────────────────
+         */
+        this.updateHasBrandIcon = () => {
+            this.hasBrandIcon = directChildren(this.el, byTagName('DS-BRAND-ICON')).length > 0;
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    componentDidLoad() {
+        this.updateHasBrandIcon();
+        this.didLoad = true;
+        this.dsDidLoad.emit();
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Closes this notification
+     */
+    async close() {
+        this.dsCloseClick.emit();
+        this.closeHandler();
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        const size = this.size || '';
+        const a11yAttributes = this.alert
+            ? { 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' }
+            : { 'role': 'status', 'aria-live': 'polite', 'aria-atomic': 'true' };
+        return (h(Host, Object.assign({ key: '83980a557445d4d8784d0af1ab76b69aa7a1758a' }, a11yAttributes, { class: {
+                'has-no-icon': this.noIcon,
+                'has-brand-icon': this.hasBrandIcon,
+                [`is-${this.color}`]: hasValue(this.color),
+                [`is-${size}`]: hasValue(this.size),
+            } }), h("section", { key: '43e4193118d3f03858a31b0be6626036bb7453df', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: 'c8ede2917fb199a6afacd072f9800cfbb3e89d97', part: "close", onClick: ev => {
+                stopEventBubbling(ev);
+                this.close();
+            } })), hasValue(this.heading) && h("h2", { key: '5244c63219eea139ddf23c922e152bf55689953b', part: "heading" }, this.heading), h("span", { key: 'f390a6797968c49399e747778462e29267c26b3f' }, h("slot", { key: 'f3af4e56e3df538384c5a3a8bacc3ad4983a2ae9', onSlotchange: this.updateHasBrandIcon })))));
+    }
+    static get is() { return "ds-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["notification.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["notification.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alert": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the notification will be displayed as an alert, otherwise as a status message."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert",
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the notification can be closed by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "closeHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Handler for on close event"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => void 0"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NotificationColor",
+                    "resolved": "\"danger\" | \"default\" | \"info\" | \"outline-default\" | \"outline-green\" | \"outline-purple\" | \"outline-red\" | \"outline-yellow\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "NotificationColor": {
+                            "location": "import",
+                            "path": "./notification.interfaces",
+                            "id": "src/components/overlays/notification/notification.interfaces.ts::NotificationColor",
+                            "referenceLocation": "NotificationColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the element\nColor type primary is deprecated, please use info instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the heading of the notification."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "noIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` there will be no icon provided"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-icon",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NotificationSize",
+                    "resolved": "\"sm\" | undefined",
+                    "references": {
+                        "NotificationSize": {
+                            "location": "import",
+                            "path": "./notification.interfaces",
+                            "id": "src/components/overlays/notification/notification.interfaces.ts::NotificationSize",
+                            "referenceLocation": "NotificationSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the size of the notification, sm or md."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "didLoad": {},
+            "hasBrandIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsCloseClick",
+                "name": "dsCloseClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the close button got clicked."
+                },
+                "complexType": {
+                    "original": "NotificationCloseClickDetail",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "NotificationCloseClickDetail": {
+                            "location": "import",
+                            "path": "./notification.interfaces",
+                            "id": "src/components/overlays/notification/notification.interfaces.ts::NotificationCloseClickDetail",
+                            "referenceLocation": "NotificationCloseClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsDidLoad",
+                "name": "dsDidLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the component has loaded."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes this notification",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('notification'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Notification.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Notification.prototype, "alert", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Notification.prototype, "closable", void 0);
+__decorate([
+    OneOf(NOTIFICATION_COLORS),
+    __metadata("design:type", String)
+], Notification.prototype, "color", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Notification.prototype, "heading", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Notification.prototype, "noIcon", void 0);
+__decorate([
+    OneOf(NOTIFICATION_SIZES),
+    __metadata("design:type", String)
+], Notification.prototype, "size", void 0);

package/dist/collection/components/overlays/notification/test/notification.a11y.play.js

@@ -0,0 +1,28 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../../playwright/src/index";
+test('basic', async ({ page, a11y }) => {
+    await page.mount(`<ds-notification heading="Heading">Your changes have been saved.</ds-notification>`);
+    await a11y('ds-notification');
+});
+test.describe('colors', () => {
+    const COLORS = [
+        'default',
+        'info',
+        'success',
+        'warning',
+        'danger',
+        'outline-default',
+        'outline-purple',
+        'outline-green',
+        'outline-yellow',
+        'outline-red',
+    ];
+    COLORS.forEach(color => {
+        test(color, async ({ page, a11y }) => {
+            await page.mount(`<ds-notification color="${color}" heading="Heading">Your changes have been saved.</ds-heading>`);
+            await a11y(`ds-notification`);
+        });
+    });
+});

package/dist/collection/components/overlays/notification/test/notification.component.play.js

@@ -0,0 +1,23 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsNotification, expect, test } from "../../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test('should have a default slot', async ({ page }) => {
+        await page.mount(`
+      <ds-notification>Notification message</ds-notification>
+    `);
+        const dsNotification = new DsNotification(page.locator('ds-notification'));
+        await dsNotification.assertToBeVisible();
+        await dsNotification.assertToContainText('Notification message');
+    });
+    test('should fire dsCloseClick event', async ({ page }) => {
+        await page.mount(`
+      <ds-notification closable>Notification message</ds-notification>
+    `);
+        const dsNotification = new DsNotification(page.locator('ds-notification'));
+        const spy = await dsNotification.el.spyOnEvent('dsCloseClick');
+        await dsNotification.clickClose();
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+});

package/dist/collection/components/overlays/notification/test/notification.ssr.play.js

@@ -0,0 +1,13 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsNotification, mountSsr, test } from "../../../../../../../playwright/src/index";
+import { renderToString } from "@baloise/ds-core/hydrate";
+test.describe('ssr', () => {
+    test('renders and hydrates', async ({ page }, testInfo) => {
+        await mountSsr(page, `<ds-notification>Notification message</ds-notification>`, renderToString, testInfo);
+        const dsNotification = new DsNotification(page.locator('ds-notification'));
+        await dsNotification.assertToBeVisible();
+        await dsNotification.assertToContainText('Notification message');
+    });
+});