@umbraco-cms/backoffice 14.0.0--preview005-eca8ee7e → 14.0.0--preview005-4682d2b5

package/dist-cms/packages/core/components/backoffice-notification-container/backoffice-notification-container.element.d.ts

@@ -1,6 +1,7 @@
 import { CSSResultGroup } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export declare class UmbBackofficeNotificationContainerElement extends UmbLitElement {
+    private _notificationsElement?;
     private _notifications?;
     private _notificationContext?;
     constructor();

package/dist-cms/packages/core/components/backoffice-notification-container/backoffice-notification-container.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbTextStyles } from '../../../../shared/style/index.js';
-import { css, html, customElement, state, repeat } from '../../../../external/lit/index.js';
+import { css, html, customElement, state, repeat, query } from '../../../../external/lit/index.js';
 import { UMB_NOTIFICATION_CONTEXT_TOKEN, } from '../../notification/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 let UmbBackofficeNotificationContainerElement = class UmbBackofficeNotificationContainerElement extends UmbLitElement {
@@ -21,11 +21,20 @@ let UmbBackofficeNotificationContainerElement = class UmbBackofficeNotificationC
             return;
         this.observe(this._notificationContext.notifications, (notifications) => {
             this._notifications = notifications;
+            // Close and instantly open the popover again to make sure it stays on top of all other content on the page
+            // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            this._notificationsElement?.hidePopover();
+            // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            this._notificationsElement?.showPopover();
         });
     }
     render() {
         return html `
-			<uui-toast-notification-container bottom-up id="notifications">
+			<uui-toast-notification-container bottom-up id="notifications" popover="manual">
 				${this._notifications
             ? repeat(this._notifications, (notification) => notification.key, (notification) => html `${notification.element}`)
             : ''}
@@ -37,16 +46,25 @@ UmbBackofficeNotificationContainerElement.styles = [
     UmbTextStyles,
     css `
 			#notifications {
-				position: absolute;
 				top: 0;
 				left: 0;
 				right: 0;
-				bottom: 70px;
+				bottom: 45px;
 				height: auto;
 				padding: var(--uui-size-layout-1);
+
+				position: fixed;
+				width: 100vw;
+				background: 0;
+				outline: 0;
+				border: 0;
+				margin: 0;
 			}
 		`,
 ];
+__decorate([
+    query('#notifications')
+], UmbBackofficeNotificationContainerElement.prototype, "_notificationsElement", void 0);
 __decorate([
     state()
 ], UmbBackofficeNotificationContainerElement.prototype, "_notifications", void 0);