diff --git a/playwright/e2e/element-examples/si-modal-service.spec.ts b/playwright/e2e/element-examples/si-modal-service.spec.ts index 73c727c66f..6785fd4204 100644 --- a/playwright/e2e/element-examples/si-modal-service.spec.ts +++ b/playwright/e2e/element-examples/si-modal-service.spec.ts @@ -28,4 +28,15 @@ test.describe('si-modal-service', () => { await si.runVisualAndA11yTests('icon'); }); + + test(example + ' full screen modal + toast', async ({ page, si }) => { + await si.visitExample(example); + + await page.locator('.btn').getByText('Create full-screen modal').click(); + await expect(page.locator('.modal-body')).toBeVisible(); + await page.locator('.btn').getByText('Show manual close toast').click(); + await expect(page.locator('.toast-content').first()).toBeVisible(); + + await si.runVisualAndA11yTests('full-screen-toast'); + }); }); diff --git a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast-element-examples-chromium-dark-linux.png new file mode 100644 index 0000000000..67ddc25128 --- /dev/null +++ b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9847da8500fd9c6bec3d228794d691ac77fbe5a44ee35550ccb15bc6b6284e7b +size 18400 diff --git a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast-element-examples-chromium-light-linux.png b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..f2136c7bbe --- /dev/null +++ b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:aa51615f86b4dd3ed63964756cbd20fe5bd35301e306f43f962323e4d55fae60 +size 18492 diff --git a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast.yaml b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast.yaml new file mode 100644 index 0000000000..bdf1f90dcc --- /dev/null +++ b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--full-screen-toast.yaml @@ -0,0 +1,16 @@ +- button "Create template modal" +- button "Create large modal" +- button "Create centered modal" +- button "Create modal with icon" +- button "Create full-screen modal" +- button "Create nested modal" +- button "Create modal with custom component" +- text: Info +- paragraph: Manual close toast +- paragraph: This notification remains visible until it is closed. +- button "Close" +- dialog: + - heading "Full-screen modal" [level=4] + - button "Close modal": + - paragraph: This full-screen modal can trigger a toast notification. + - button "Show manual close toast" \ No newline at end of file diff --git a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--icon-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--icon-element-examples-chromium-dark-linux.png index 266f9522cf..d879ad4257 100644 --- a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--icon-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--icon-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a96d1989ce0a5740935d5b4c58a4c3db9c5a80b079884a6647ad4d2dbc7f708e -size 16429 +oid sha256:f49f9322af20b843d803c95be302a105555ac58b5b0d82526da2f8ac25c1beff +size 16066 diff --git a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--icon-element-examples-chromium-light-linux.png b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--icon-element-examples-chromium-light-linux.png index 4190f44d66..3459373b81 100644 --- a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--icon-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service--icon-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0ec17f2af0fbee1188b2d35c08dfe96481531eed942c607128c398c4009bbb89 -size 18958 +oid sha256:992cf334978ece8beb9f76d92cac203f339fa484ee45fa1c00e1937588e4570c +size 18628 diff --git a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service-element-examples-chromium-dark-linux.png index f36cde3ddb..7946020d0f 100644 --- a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0bb7a2095be52a00ee30c36a0806567961f3c8e182c18588e02db5f70aa1ea8f -size 16490 +oid sha256:98db3a69a37195126448da4cb102484670a6f94a457c95d16187360dcfe2732d +size 16081 diff --git a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service-element-examples-chromium-light-linux.png b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service-element-examples-chromium-light-linux.png index 1cedea6113..eb1568b6c5 100644 --- a/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-modal-service.spec.ts-snapshots/si-modals--si-modal-service-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e31c049b39f13c9f5b0a3b34ef5887a9e8c519a687bd9f67838bc17f67d7b564 -size 18854 +oid sha256:61af5db5cbc0db1f0d598d30badd0b40a5fa54178b1d61c07c07d33c015a3ce7 +size 18528 diff --git a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu-element-examples-chromium-light-linux.png index d8e71c308c..1961414de7 100644 --- a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b6df702d204f46c4351e03488054e2c7faf91b339b48fdaa3db27e9b462eae1e -size 47905 +oid sha256:20ca009dea9fede6195c0fb34b1919a48113cfeb7edc704398ff3e967a423713 +size 47690 diff --git a/projects/element-ng/toast-notification/si-toast-notification.service.ts b/projects/element-ng/toast-notification/si-toast-notification.service.ts index 02d47cc7dc..7c2c2d9435 100644 --- a/projects/element-ng/toast-notification/si-toast-notification.service.ts +++ b/projects/element-ng/toast-notification/si-toast-notification.service.ts @@ -110,6 +110,17 @@ export class SiToastNotificationService implements OnDestroy { ); } + // when using popover API, brings toast to top layer + const host = this.overlayRef?.hostElement; + if (host?.getAttribute('popover')) { + try { + host.hidePopover(); + host.showPopover(); + } catch { + // ignored + } + } + return toast; } diff --git a/projects/element-ng/tour/si-tour.service.ts b/projects/element-ng/tour/si-tour.service.ts index 602dae4e11..869ed8b400 100644 --- a/projects/element-ng/tour/si-tour.service.ts +++ b/projects/element-ng/tour/si-tour.service.ts @@ -238,6 +238,17 @@ export class SiTourService { // component for each step this.outsideClickDispatcher.remove(this.overlayRef); this.outsideClickDispatcher.add(this.overlayRef); + + // when using popover API, brings tour to top layer + const host = this.overlayRef?.hostElement; + if (host?.getAttribute('popover')) { + try { + host.hidePopover(); + host.showPopover(); + } catch { + // ignored + } + } return; } diff --git a/src/app/examples/si-modals/si-modal-service.html b/src/app/examples/si-modals/si-modal-service.html index 4d0e1508bf..bac85c65be 100644 --- a/src/app/examples/si-modals/si-modal-service.html +++ b/src/app/examples/si-modals/si-modal-service.html @@ -14,6 +14,12 @@ Create modal with icon + Create full-screen modal Modal + + + Full-screen modal + + + + + This full-screen modal can trigger a toast notification. + Show manual close toast + + + Modal diff --git a/src/app/examples/si-modals/si-modal-service.ts b/src/app/examples/si-modals/si-modal-service.ts index 1794946e93..74632c6901 100644 --- a/src/app/examples/si-modals/si-modal-service.ts +++ b/src/app/examples/si-modals/si-modal-service.ts @@ -5,6 +5,7 @@ import { Component, inject, Injector, OnDestroy, TemplateRef } from '@angular/core'; import { SiStatusIconComponent } from '@siemens/element-ng/icon'; import { ModalRef, SiModalService } from '@siemens/element-ng/modal'; +import { SiToastNotificationService } from '@siemens/element-ng/toast-notification'; import { LOG_EVENT } from '@siemens/live-preview'; import { AppTableComponent } from './app-table.component'; @@ -21,6 +22,7 @@ export class SampleComponent implements OnDestroy { private logEvent = inject(LOG_EVENT); private modalService = inject(SiModalService); + private toastNotificationService = inject(SiToastNotificationService); private injector = inject(Injector); ngOnDestroy(): void { @@ -73,4 +75,13 @@ export class SampleComponent implements OnDestroy { injector: this.injector }); } + + showManualCloseToast(): void { + this.toastNotificationService.showToastNotification({ + state: 'info', + title: 'Manual close toast', + message: 'This notification remains visible until it is closed.', + disableAutoClose: true + }); + } }
This full-screen modal can trigger a toast notification.