wcs-core 7.1.0 → 7.2.1

package/dist/collection/components/alert/alert.js

@@ -0,0 +1,257 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Alerts are used to communicate a state or an action that has been performed.
+ * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of
+ * the alert visibility
+ *
+ * @cssprop --wcs-alert-background-color - Background color of the alert
+ * @cssprop --wcs-alert-icon-background-color - Background color of the icon
+ * @cssprop --wcs-alert-title-color - Color of the title
+ * @cssprop --wcs-alert-subtitle-color - Color of the subtitle
+ * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button
+ * @cssprop --wcs-alert-title-font-weight - Font weight of the title
+ * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle
+ * @cssprop --wcs-alert-title-font-size - Font size of the title
+ * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle
+ * @cssprop --wcs-alert-border-width - Border width of the alert
+ * @cssprop --wcs-alert-border-color - Border color of the alert
+ * @cssprop --wcs-alert-border-radius - Border radius of the alert
+ * @cssprop --wcs-alert-padding - Padding of the alert
+ * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button
+ * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component
+ * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true
+ * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar
+ */
+export class Alert {
+    constructor() {
+        /** Only active if timeout > 0, becomes true when the alert reaches its maximum display time */
+        this.isTimedOut = false;
+        /** Indicates if the mouse cursor is hovering over the alert */
+        this.isMouseHover = false;
+        /**
+         * ID of the setTimeout used to manage the alert's lifetime
+         * https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes
+         */
+        this.timeoutId = undefined;
+        this.show = true;
+        this.intent = 'success';
+        this.timeout = 5000;
+        this.showProgressBar = false;
+    }
+    mouseOverHandler() {
+        this.mouseHover(true);
+    }
+    mouseOutHandler() {
+        this.mouseHover(false);
+    }
+    /**
+     * Handles the mouse hover state of the alert
+     * @param hover - true if the mouse is hovering over the alert, false otherwise
+     */
+    mouseHover(hover) {
+        this.isMouseHover = hover;
+        // If the timeout has passed (i.e. the user had the mouse on the component when it expired), we close the alert.
+        if (this.isTimedOut && !this.isMouseHover) {
+            this.close();
+        }
+    }
+    async componentWillLoad() {
+        await this.showAlertAndRunTimeout();
+    }
+    async componentDidLoad() {
+        var _a;
+        /*
+        Because icon serves also to announce the state of the alert based on the type. We set aria-label on the icon based
+        on the type
+         */
+        (_a = this.annoucementIconHtmlElement) === null || _a === void 0 ? void 0 : _a.setAriaAttribute('aria-hidden', 'false');
+        if (this.showProgressBar) {
+            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', this.timeout / 1000 + 's');
+        }
+        else {
+            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', '0s');
+        }
+    }
+    async showAlertAndRunTimeout() {
+        if (this.timeout === 0)
+            return;
+        this.show = true;
+        this.timeoutId = setTimeout(() => {
+            // If the user has the mouse over the alert, we only indicate that the timemout has expired, and the method that handles the mousehover event will close it
+            if (!this.isMouseHover) {
+                this.close();
+            }
+            this.isTimedOut = true;
+        }, this.timeout);
+    }
+    onCloseButtonClick(_) {
+        this.close();
+    }
+    close() {
+        this.show = false;
+        this.wcsAlertDismiss.emit();
+    }
+    getMaterialIcon() {
+        switch (this.intent) {
+            case "success":
+                return 'check_circle';
+            case "information":
+                return 'info';
+            case "error":
+                return 'error';
+            case "warning":
+                return 'warning';
+        }
+    }
+    getAriaLabel() {
+        switch (this.intent) {
+            case "success":
+                return 'Succès';
+            case "information":
+                return 'Information';
+            case "error":
+                return 'Erreur';
+            case "warning":
+                return 'Attention';
+        }
+    }
+    disconnectedCallback() {
+        /*
+         https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes
+         (Passing an invalid ID to clearTimeout() silently does nothing; no exception is thrown.)
+         */
+        clearTimeout(this.timeoutId);
+    }
+    render() {
+        return (h(Host, { key: '82c9f5879eae7adef41c921ef34b2b9d891c0d6b' }, h("div", { key: 'b46424dfb6b620b62767b6bb8048827f83d116a7', class: "icon-content-container" }, h("wcs-mat-icon", { key: 'ff3a0bc91a73e275936bbe8f77c904f397296551', class: "announcement-icon", ref: (el) => this.annoucementIconHtmlElement = el, icon: this.getMaterialIcon(), "aria-label": this.getAriaLabel(), role: "img", "aria-hidden": false }), h("div", { key: 'ea866940416ddaf5eaf73cec83f30c71b01c41d8', class: "content" }, h("slot", { key: 'd14c321ebdb78b646bb4fc19e613dbd2cc61ed31', name: "title" }), h("slot", { key: '569d6556ea823f82e1d6164ac20361e27c85b592', name: "subtitle" }))), h("wcs-button", { key: 'f13afc31116b7b6fe04e0186128d0288725ace98', shape: "round", size: "s", mode: "clear", class: "close-button wcs-dark", "aria-label": "Fermer cette notification", onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '02557c896159ec1a7fdab853a07f7c79c17dd5d7', icon: "close" })), h("div", { key: '9e90e95009da575ca693e5ba4e92b3916ad4ee6f', class: 'progress-bar' + (!this.showProgressBar ? ' hidden' : '') }, h("div", { key: 'c8858551592bb0b1622e2ee19c67a662f31ce068', class: "progress-bar-track" }))));
+    }
+    static get is() { return "wcs-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "show": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visibility state of the alert.\nThis property is exposed to allow control of the alert's display state and animation timing:\n- Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed\n- Can be used directly for custom implementations (though using wcs-alert-drawer is recommended)\n- When set to false, it triggers the exit animation if implemented\n\nNote: While direct usage is possible for custom implementations, it's recommended to use\nwcs-alert-drawer for consistent alert management and animations."
+                },
+                "attribute": "show",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "WcsAlertIntent",
+                    "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+                    "references": {
+                        "WcsAlertIntent": {
+                            "location": "import",
+                            "path": "./alert-interface",
+                            "id": "src/components/alert/alert-interface.ts::WcsAlertIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "intent",
+                "reflect": true,
+                "defaultValue": "'success'"
+            },
+            "timeout": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Time duration of the alert visibility\n\n5000ms by default\nIf 0, the alert will not emit `wcsAlertDismiss` event automatically"
+                },
+                "attribute": "timeout",
+                "reflect": false,
+                "defaultValue": "5000"
+            },
+            "showProgressBar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-progress-bar",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wcsAlertDismiss",
+                "name": "wcsAlertDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the alert is dismissed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mouseover",
+                "method": "mouseOverHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseout",
+                "method": "mouseOutHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop, Element, Listen } from '@stencil/core';\nimport { WcsAlertIntent } from \"./alert-interface\";\n\n/**\n * Alerts are used to communicate a state or an action that has been performed.\n * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of \n * the alert visibility\n * \n * @cssprop --wcs-alert-background-color - Background color of the alert\n * @cssprop --wcs-alert-icon-background-color - Background color of the icon\n * @cssprop --wcs-alert-title-color - Color of the title\n * @cssprop --wcs-alert-subtitle-color - Color of the subtitle\n * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button\n * @cssprop --wcs-alert-title-font-weight - Font weight of the title\n * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle\n * @cssprop --wcs-alert-title-font-size - Font size of the title\n * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle\n * @cssprop --wcs-alert-border-width - Border width of the alert\n * @cssprop --wcs-alert-border-color - Border color of the alert\n * @cssprop --wcs-alert-border-radius - Border radius of the alert\n * @cssprop --wcs-alert-padding - Padding of the alert\n * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button\n * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component\n * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true\n * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar\n */\n@Component({\n    tag: 'wcs-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Element() private el: HTMLElement;\n\n    /**\n     * Controls the visibility state of the alert.\n     * This property is exposed to allow control of the alert's display state and animation timing:\n     * - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed\n     * - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended)\n     * - When set to false, it triggers the exit animation if implemented\n     * \n     * Note: While direct usage is possible for custom implementations, it's recommended to use\n     * wcs-alert-drawer for consistent alert management and animations.\n     */\n    @Prop({ mutable: true, reflect: true }) show: boolean = true;\n\n    @Prop({ reflect: true })\n    intent: WcsAlertIntent = 'success';\n\n    /**\n     * Event emitted when the alert is dismissed\n     */\n    @Event() wcsAlertDismiss: EventEmitter<void>;\n\n    /**\n     * Time duration of the alert visibility\n     * \n     * 5000ms by default\n     * If 0, the alert will not emit `wcsAlertDismiss` event automatically\n     */\n    @Prop() timeout = 5000;\n    @Prop() showProgressBar: boolean = false;\n\n    /** Only active if timeout > 0, becomes true when the alert reaches its maximum display time */\n    private isTimedOut: boolean = false;\n\n    /** Indicates if the mouse cursor is hovering over the alert */\n    private isMouseHover: boolean = false;\n    /**\n     * ID of the setTimeout used to manage the alert's lifetime\n     * https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes\n     */\n    private timeoutId = undefined;\n\n    /** Reference to the alert's information icon for managing its aria-label */\n    private annoucementIconHtmlElement!: HTMLWcsMatIconElement;\n\n\n    @Listen('mouseover')\n    mouseOverHandler() {\n        this.mouseHover(true)\n    }\n\n    @Listen('mouseout')\n    mouseOutHandler() {\n        this.mouseHover(false);\n    }\n\n    /**\n     * Handles the mouse hover state of the alert\n     * @param hover - true if the mouse is hovering over the alert, false otherwise\n     */\n    private mouseHover(hover: boolean) {\n        this.isMouseHover = hover;\n\n        // If the timeout has passed (i.e. the user had the mouse on the component when it expired), we close the alert.\n        if (this.isTimedOut && !this.isMouseHover) {\n            this.close();\n        }\n    }\n\n    async componentWillLoad() {\n        await this.showAlertAndRunTimeout();\n    }\n\n    async componentDidLoad() {\n        /*\n        Because icon serves also to announce the state of the alert based on the type. We set aria-label on the icon based\n        on the type\n         */\n        this.annoucementIconHtmlElement?.setAriaAttribute('aria-hidden', 'false');\n\n        if (this.showProgressBar) {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', this.timeout / 1000 + 's');\n        } else {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', '0s');\n        }\n    }\n\n    async showAlertAndRunTimeout() {\n        if (this.timeout === 0) return;\n        this.show = true;\n        this.timeoutId = setTimeout(() => {\n            // If the user has the mouse over the alert, we only indicate that the timemout has expired, and the method that handles the mousehover event will close it\n            if (!this.isMouseHover) {\n                this.close();\n            }\n            this.isTimedOut = true;\n        }, this.timeout);\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private close() {\n        this.show = false;\n        this.wcsAlertDismiss.emit();\n    }\n\n    private getMaterialIcon() {\n        switch (this.intent) {\n            case \"success\":\n                return 'check_circle'\n            case \"information\":\n                return 'info'\n            case \"error\":\n                return 'error'\n            case \"warning\":\n                return 'warning'\n        }\n    }\n\n    private getAriaLabel() {\n        switch (this.intent) {\n            case \"success\":\n                return 'Succès';\n            case \"information\":\n                return 'Information';\n            case \"error\":\n                return 'Erreur';\n            case \"warning\":\n                return 'Attention';\n        }\n    }\n\n    disconnectedCallback() {\n        /*\n         https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes \n         (Passing an invalid ID to clearTimeout() silently does nothing; no exception is thrown.)\n         */\n        clearTimeout(this.timeoutId);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"icon-content-container\">\n                    <wcs-mat-icon class=\"announcement-icon\"\n                        ref={(el) => this.annoucementIconHtmlElement = el}\n                        icon={this.getMaterialIcon()}\n                        aria-label={this.getAriaLabel()}\n                        role=\"img\"\n                        aria-hidden={false}></wcs-mat-icon>\n                    <div class=\"content\">\n                        <slot name=\"title\"></slot>\n                        <slot name=\"subtitle\"></slot>\n                    </div>\n                </div>\n                <wcs-button shape=\"round\" size=\"s\" mode=\"clear\" class=\"close-button wcs-dark\"\n                    aria-label=\"Fermer cette notification\"\n                    onClick={($event) => this.onCloseButtonClick($event)}>\n                    <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                </wcs-button>\n                <div class={'progress-bar' + (!this.showProgressBar ? ' hidden' : '')}>\n                    <div class=\"progress-bar-track\"></div>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/alert-drawer/alert-drawer-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=alert-drawer-interface.js.map

package/dist/collection/components/alert-drawer/alert-drawer-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-drawer-interface.js","sourceRoot":"","sources":["../../../src/components/alert-drawer/alert-drawer-interface.ts"],"names":[],"mappings":"","sourcesContent":["export type WcsAlertDrawerPosition = 'bottom' | 'top' | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n"]}

package/dist/collection/components/alert-drawer/alert-drawer.css

@@ -0,0 +1,103 @@
+@keyframes slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes slide-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes slide-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+:host {
+  --wcs-alert-drawer-gap: var(--wcs-semantic-spacing-base);
+  --wcs-alert-drawer-margin-horizontal: var(--wcs-semantic-spacing-base);
+  --wcs-alert-drawer-margin-vertical: var(--wcs-semantic-spacing-base);
+  --wcs-alert-drawer-min-width: 400px;
+  --wcs-alert-drawer-hide-alert-animation-duration: var(--wcs-semantic-motion-duration-feedback-slow);
+  position: fixed;
+  z-index: 99999;
+  width: fit-content;
+}
+:host wcs-alert {
+  --wcs-alert-min-width: var(--wcs-alert-drawer-min-width);
+}
+:host wcs-alert:not([show]) {
+  animation-duration: var(--wcs-alert-drawer-hide-alert-animation-duration);
+  animation-timing-function: ease;
+  animation-name: slide-out;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  :host wcs-alert:not([show]) {
+    animation: none;
+  }
+}
+:host #alerts-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wcs-alert-drawer-gap);
+}
+
+@media (max-width: 575px) {
+  :host {
+    left: 50% !important;
+    transform: translate(-50%, 0);
+    width: calc(100% - 2 * var(--wcs-alert-drawer-margin-horizontal));
+  }
+  :host wcs-alert {
+    --wcs-alert-min-width: 100%;
+  }
+}
+:host([position=top]), :host([position=top-left]), :host([position=top-right]) {
+  top: var(--wcs-alert-drawer-margin-vertical);
+  flex-direction: column-reverse;
+}
+:host([position=top]) wcs-alert[show], :host([position=top-left]) wcs-alert[show], :host([position=top-right]) wcs-alert[show] {
+  animation: slide-in-top var(--wcs-alert-drawer-hide-alert-animation-duration) ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  :host([position=top]) wcs-alert[show], :host([position=top-left]) wcs-alert[show], :host([position=top-right]) wcs-alert[show] {
+    animation: none;
+  }
+}
+
+:host([position=bottom]), :host([position=bottom-left]), :host([position=bottom-right]) {
+  bottom: var(--wcs-alert-drawer-margin-vertical);
+}
+:host([position=bottom]) wcs-alert[show], :host([position=bottom-left]) wcs-alert[show], :host([position=bottom-right]) wcs-alert[show] {
+  animation: slide-in-bottom var(--wcs-alert-drawer-hide-alert-animation-duration) ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  :host([position=bottom]) wcs-alert[show], :host([position=bottom-left]) wcs-alert[show], :host([position=bottom-right]) wcs-alert[show] {
+    animation: none;
+  }
+}
+
+:host([position=top-right]), :host([position=bottom-right]) {
+  right: var(--wcs-alert-drawer-margin-horizontal);
+}
+
+:host([position=top-left]), :host([position=bottom-left]) {
+  left: var(--wcs-alert-drawer-margin-horizontal);
+}
+
+:host([position=bottom]), :host([position=top]) {
+  left: 50%;
+  transform: translate(-50%, 0);
+}

package/dist/collection/components/alert-drawer/alert-drawer.e2e.js

@@ -0,0 +1,111 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { setWcsContent } from "../../utils/tests";
+const WAITING_DELAY_BEFORE_ASSERTIONS = 1000;
+describe('alert-drawer', () => {
+    it('should show an alert when using show() method', async () => {
+        // Given
+        const page = await newE2EPage();
+        await setWcsContent(page, `
+            <wcs-alert-drawer position="bottom-right"></wcs-alert-drawer>
+        `);
+        const alertDrawer = await page.find('wcs-alert-drawer');
+        // When
+        await alertDrawer.callMethod('show', {
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 0
+        });
+        await page.waitForChanges();
+        // Then
+        const alert = await page.find('wcs-alert-drawer >>> wcs-alert');
+        expect(alert).not.toBeNull();
+        const title = await page.find('wcs-alert-drawer >>> wcs-alert > [slot="title"]');
+        const subtitle = await page.find('wcs-alert-drawer >>> wcs-alert > [slot="subtitle"]');
+        expect(title.textContent).toBe('Test Title');
+        expect(subtitle.textContent).toBe('Test Subtitle');
+    });
+    it('should close the alert after timeout', async () => {
+        // Given
+        const page = await newE2EPage();
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = await page.find('wcs-alert-drawer');
+        // When
+        await alertDrawer.callMethod('show', {
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 100 // Short timeout for testing
+        });
+        await page.waitForChanges();
+        // Wait for the alert to be removed
+        await new Promise(resolve => setTimeout(resolve, WAITING_DELAY_BEFORE_ASSERTIONS)); // Wait a bit longer than the timeout
+        // Then
+        const alert = await page.find('wcs-alert-drawer >>> wcs-alert');
+        expect(alert).toBeNull();
+    });
+    it('should show progress bar when showProgressBar is true', async () => {
+        // Given
+        const page = await newE2EPage();
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = await page.find('wcs-alert-drawer');
+        // When
+        await alertDrawer.callMethod('show', {
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: true,
+            timeout: 5000
+        });
+        await page.waitForChanges();
+        // Then
+        const progressBar = await page.find('wcs-alert-drawer >>> wcs-alert >>> .progress-bar');
+        expect(progressBar).not.toBeNull();
+    });
+    it('should have correct ARIA attributes for accessibility', async () => {
+        // Given
+        const page = await newE2EPage();
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = await page.find('wcs-alert-drawer');
+        // Then
+        expect(alertDrawer.getAttribute('role')).toBe('region');
+        expect(alertDrawer.getAttribute('aria-live')).toBe('polite');
+        expect(alertDrawer.getAttribute('aria-atomic')).toBe('true');
+    });
+    it('should handle multiple alerts', async () => {
+        // Given
+        const page = await newE2EPage();
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = await page.find('wcs-alert-drawer');
+        // When
+        await alertDrawer.callMethod('show', {
+            title: 'First Alert',
+            subtitle: 'First Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 0
+        });
+        await alertDrawer.callMethod('show', {
+            title: 'Second Alert',
+            subtitle: 'Second Subtitle',
+            intent: 'warning',
+            showProgressBar: false,
+            timeout: 0
+        });
+        await page.waitForChanges();
+        // Then
+        const alerts = await page.findAll('wcs-alert-drawer >>> wcs-alert');
+        expect(alerts.length).toBe(2);
+    });
+});
+//# sourceMappingURL=alert-drawer.e2e.js.map

package/dist/collection/components/alert-drawer/alert-drawer.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-drawer.e2e.js","sourceRoot":"","sources":["../../../src/components/alert-drawer/alert-drawer.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\nimport { setWcsContent } from '../../utils/tests';\n\nconst WAITING_DELAY_BEFORE_ASSERTIONS = 1_000;\n\ndescribe('alert-drawer', () => {\n    it('should show an alert when using show() method', async () => {\n        // Given\n        const page = await newE2EPage();\n        await setWcsContent(page, `\n            <wcs-alert-drawer position=\"bottom-right\"></wcs-alert-drawer>\n        `);\n        const alertDrawer = await page.find('wcs-alert-drawer');\n\n        // When\n        await alertDrawer.callMethod('show', {\n            title: 'Test Title',\n            subtitle: 'Test Subtitle',\n            intent: 'success',\n            showProgressBar: false,\n            timeout: 0\n        });\n        await page.waitForChanges();\n\n        // Then\n        const alert = await page.find('wcs-alert-drawer >>> wcs-alert');\n        expect(alert).not.toBeNull();\n        const title = await page.find('wcs-alert-drawer >>> wcs-alert > [slot=\"title\"]');\n        const subtitle = await page.find('wcs-alert-drawer >>> wcs-alert > [slot=\"subtitle\"]');\n        expect(title.textContent).toBe('Test Title');\n        expect(subtitle.textContent).toBe('Test Subtitle');\n    });\n\n    it('should close the alert after timeout', async () => {\n        // Given\n        const page = await newE2EPage();\n        await setWcsContent(page, `\n            <wcs-alert-drawer></wcs-alert-drawer>\n        `);\n        const alertDrawer = await page.find('wcs-alert-drawer');\n\n        // When\n        await alertDrawer.callMethod('show', {\n            title: 'Test Title',\n            subtitle: 'Test Subtitle',\n            intent: 'success',\n            showProgressBar: false,\n            timeout: 100 // Short timeout for testing\n        });\n        await page.waitForChanges();\n\n        // Wait for the alert to be removed\n        await new Promise(resolve => setTimeout(resolve, WAITING_DELAY_BEFORE_ASSERTIONS)); // Wait a bit longer than the timeout\n\n        // Then\n        const alert = await page.find('wcs-alert-drawer >>> wcs-alert');\n        expect(alert).toBeNull();\n    });\n\n    it('should show progress bar when showProgressBar is true', async () => {\n        // Given\n        const page = await newE2EPage();\n        await setWcsContent(page, `\n            <wcs-alert-drawer></wcs-alert-drawer>\n        `);\n        const alertDrawer = await page.find('wcs-alert-drawer');\n\n        // When\n        await alertDrawer.callMethod('show', {\n            title: 'Test Title',\n            subtitle: 'Test Subtitle',\n            intent: 'success',\n            showProgressBar: true,\n            timeout: 5000\n        });\n        await page.waitForChanges();\n\n        // Then\n        const progressBar = await page.find('wcs-alert-drawer >>> wcs-alert >>> .progress-bar');\n        expect(progressBar).not.toBeNull();\n    });\n\n    it('should have correct ARIA attributes for accessibility', async () => {\n        // Given\n        const page = await newE2EPage();\n        await setWcsContent(page, `\n            <wcs-alert-drawer></wcs-alert-drawer>\n        `);\n        const alertDrawer = await page.find('wcs-alert-drawer');\n\n        // Then\n        expect(alertDrawer.getAttribute('role')).toBe('region');\n        expect(alertDrawer.getAttribute('aria-live')).toBe('polite');\n        expect(alertDrawer.getAttribute('aria-atomic')).toBe('true');\n    });\n\n    it('should handle multiple alerts', async () => {\n        // Given\n        const page = await newE2EPage();\n        await setWcsContent(page, `\n            <wcs-alert-drawer></wcs-alert-drawer>\n        `);\n        const alertDrawer = await page.find('wcs-alert-drawer');\n\n        // When\n        await alertDrawer.callMethod('show', {\n            title: 'First Alert',\n            subtitle: 'First Subtitle',\n            intent: 'success',\n            showProgressBar: false,\n            timeout: 0\n        });\n        await alertDrawer.callMethod('show', {\n            title: 'Second Alert',\n            subtitle: 'Second Subtitle',\n            intent: 'warning',\n            showProgressBar: false,\n            timeout: 0\n        });\n        await page.waitForChanges();\n\n        // Then\n        const alerts = await page.findAll('wcs-alert-drawer >>> wcs-alert');\n        expect(alerts.length).toBe(2);\n    });\n});\n"]}