fix: bring native popover to top layer for special cases

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');
+  });
 });

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"

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;
   }
 

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;
     }
 

src/app/examples/si-modals/si-modal-service.html

@@ -14,6 +14,12 @@
   <button type="button" class="btn btn-secondary" (click)="openModal(iconTemplate)"
     >Create modal with icon</button
   >
+  <button
+    type="button"
+    class="btn btn-secondary"
+    (click)="openModal(fullscreenTemplate, 'modal-fullscreen')"
+    >Create full-screen modal</button
+  >
   <button
     type="button"
     class="btn btn-secondary"
@@ -44,6 +50,25 @@ <h4 class="modal-title" id="sample-modal-title">Modal</h4>
   </div>
 </ng-template>
 
+<ng-template #fullscreenTemplate let-modalRef="modalRef">
+  <div class="modal-header">
+    <h4 class="modal-title" id="sample-modal-title">Full-screen modal</h4>
+    <button
+      type="button"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
+      aria-label="Close modal"
+      (click)="modalRef.hide('cancel')"
+    >
+    </button>
+  </div>
+  <div class="modal-body">
+    <p>This full-screen modal can trigger a toast notification.</p>
+    <button type="button" class="btn btn-secondary" (click)="showManualCloseToast()"
+      >Show manual close toast</button
+    >
+  </div>
+</ng-template>
+
 <ng-template #nestedTemplate let-parentModalRef="modalRef" let-thing="someThing">
   <div class="modal-header">
     <h4 class="modal-title" id="sample-modal-title-parent">Modal</h4>

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
+    });
+  }
 }