Chore: Notification / Modal imports (#695)

* move notification default elements into core + import from package index

* This context is already provided from the core package

* append notification element from core entry point

* modal context is already provided

* remove unused modal import

* append modal container from core package

* move the z-index style

src/Umbraco.Web.UI.Client/.vscode/settings.json

@@ -1,6 +1,7 @@
 {
 	"cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"],
 	"cSpell.words": [
+		"Backoffice",
 		"combobox",
 		"Elementable",
 		"templating",

src/Umbraco.Web.UI.Client/src/app.ts

@@ -5,8 +5,6 @@ import 'element-internals-polyfill';
 
 import './core/router/router-slot.element';
 import './core/router/variant-router-slot.element';
-import './core/notification/layouts/default';
-import './core/modal/modal-element.element';
 
 import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html } from 'lit';

src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts

@@ -8,8 +8,6 @@ import {
 } from './core/components/backoffice-frame/backoffice.context';
 import { UmbExtensionInitializer } from './packages/repository/server-extension.controller';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
-import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbEntryPointExtensionInitializer } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -31,8 +29,6 @@ const CORE_PACKAGES = [
 export class UmbBackofficeElement extends UmbLitElement {
 	constructor() {
 		super();
-		this.provideContext(UMB_MODAL_CONTEXT_TOKEN, new UmbModalContext(this));
-		this.provideContext(UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext());
 		this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext());
 		new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry);
 		new UmbStoreExtensionInitializer(this);
@@ -43,8 +39,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		return html`
 			<umb-backoffice-header></umb-backoffice-header>
 			<umb-backoffice-main></umb-backoffice-main>
-			<umb-backoffice-notification-container></umb-backoffice-notification-container>
-			<umb-backoffice-modal-container></umb-backoffice-modal-container>
+			<slot></slot>
 		`;
 	}
 
@@ -60,9 +55,6 @@ export class UmbBackofficeElement extends UmbLitElement {
 				font-size: 14px;
 				box-sizing: border-box;
 			}
-			umb-backoffice-modal-container {
-				z-index: 1000;
-			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-modal-container.element.ts

@@ -7,8 +7,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-modal-container')
 export class UmbBackofficeModalContainerElement extends UmbLitElement {
-	
-
 	@state()
 	private _modals?: UmbModalHandler[];
 
@@ -38,12 +36,13 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 			</uui-modal-container>
 		`;
 	}
-	
+
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
 			:host {
 				position: absolute;
+				z-index: 1000;
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-notification-container.element.ts

@@ -11,8 +11,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-notification-container')
 export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
-	
-
 	@state()
 	private _notifications?: UmbNotificationHandler[];
 
@@ -48,7 +46,7 @@ export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
 			</uui-toast-notification-container>
 		`;
 	}
-	
+
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`

src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts

@@ -2,11 +2,17 @@ import { manifests as componentManifests } from './components';
 import { manifests as propertyActionManifests } from './property-actions/manifests';
 import { manifests as propertyEditorManifests } from './property-editors/manifests';
 import { manifests as modalManifests } from './modals/manifests';
+
+import { UmbBackofficeNotificationContainerElement } from './components/backoffice-frame/backoffice-notification-container.element';
+import { UmbBackofficeModalContainerElement } from './components/backoffice-frame/backoffice-modal-container.element';
+
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
 import type { UmbEntrypointOnInit } from '@umbraco-cms/backoffice/extensions-api';
 
+import './notification';
+
 export const manifests = [
 	...componentManifests,
 	...propertyActionManifests,
@@ -17,6 +23,12 @@ export const manifests = [
 export const onInit: UmbEntrypointOnInit = (host, extensionRegistry) => {
 	extensionRegistry.registerMany(manifests);
 
-	new UmbContextProviderController(host, UMB_MODAL_CONTEXT_TOKEN, new UmbModalContext(host));
+	const notificationContainerElement = new UmbBackofficeNotificationContainerElement();
+	host.appendChild(notificationContainerElement);
+
+	const modalContainerElement = new UmbBackofficeModalContainerElement();
+	host.appendChild(modalContainerElement);
+
 	new UmbContextProviderController(host, UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext());
+	new UmbContextProviderController(host, UMB_MODAL_CONTEXT_TOKEN, new UmbModalContext(host));
 };

src/Umbraco.Web.UI.Client/src/backoffice/core/notification/index.ts

@@ -0,0 +1 @@
+import './layouts/default';