modal service and container WIP. Updated modal packages

src/Umbraco.Web.UI.Client/package-lock.json

@@ -1310,7 +1310,7 @@
 		"node_modules/@umbraco-ui/uui-modal": {
 			"version": "0.0.0",
 			"resolved": "file:umbraco-ui-uui-modal-0.0.0.tgz",
-			"integrity": "sha512-Iq0OuIpjuEeQHafZibNkJ0PcN3Xxanqgo5NTJbMVeO+HSGbA1hAWV2XLx/bKjUB5vgcUxqcpwJGQQREDrgDXKg==",
+			"integrity": "sha512-BYfbO5UocZrtj8t1Baox3ivldbNyoKugZGvwKXl0XZ7FZVGvAMrVmzZSI6KtEvYl9Jey/I8VqkZh30QBflEM0Q==",
 			"license": "MIT",
 			"dependencies": {
 				"@umbraco-ui/uui-base": "1.0.0-rc.0"
@@ -1319,7 +1319,7 @@
 		"node_modules/@umbraco-ui/uui-modal-container": {
 			"version": "0.0.0",
 			"resolved": "file:umbraco-ui-uui-modal-container-0.0.0.tgz",
-			"integrity": "sha512-Cpkib1X0f+HS4W6o9NKUw65vaSmJSAccw+o7svbNfWAsZ5EyvyvAWvxpdAfQTtK0EWIqDhKMTo9hjFdXGlceCg==",
+			"integrity": "sha512-nsw2fkpOnG7pU+TqDZqXF57eNw2a4zIyN1TllVNEU4tdPrF5c4vTyIzE5O6Flsu8euCVruDZepo9SyLTm6jnew==",
 			"license": "MIT",
 			"dependencies": {
 				"@umbraco-ui/uui-base": "1.0.0-rc.0"
@@ -1336,7 +1336,7 @@
 		"node_modules/@umbraco-ui/uui-modal-dialog": {
 			"version": "0.0.0",
 			"resolved": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz",
-			"integrity": "sha512-YtoIaGPFJaDjX3UFrpap2w6r/LLz8x8GqZkh2wH+imi1EIatyj1eq9zE8LAe+I0IaJ/8SAAEG4kY9OhlVpkhJg==",
+			"integrity": "sha512-hv3LQ/kzTZQMMXDt8NM5ZJTIsEYof5zKx9VFxbUGnhJhNRLeJ4bk9suWVl8h942VsOJwR+NbXzOs4XTIqXb9MA==",
 			"license": "MIT",
 			"dependencies": {
 				"@umbraco-ui/uui-base": "1.0.0-rc.0"
@@ -1353,7 +1353,7 @@
 		"node_modules/@umbraco-ui/uui-modal-sidebar": {
 			"version": "0.0.0",
 			"resolved": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz",
-			"integrity": "sha512-KyLsrek2qPjgmZYjKbGkomskyb5Uy4oSIAOuWJPo3nMTEUyTP55Nq1BlXkRqiGPxK/8NYbIHD5TR33G9KSkWDw==",
+			"integrity": "sha512-qQTO/YD3wzACmHf6QVW5c2smWMPougDwyKLV6Zku+QdgeZleS1ZiR/AvqHVHiRjuQ84ZhKyBl4H1IcYnAMntnw==",
 			"license": "MIT",
 			"dependencies": {
 				"@umbraco-ui/uui-base": "1.0.0-rc.0"
@@ -8904,7 +8904,7 @@
 		},
 		"@umbraco-ui/uui-modal": {
 			"version": "file:umbraco-ui-uui-modal-0.0.0.tgz",
-			"integrity": "sha512-Iq0OuIpjuEeQHafZibNkJ0PcN3Xxanqgo5NTJbMVeO+HSGbA1hAWV2XLx/bKjUB5vgcUxqcpwJGQQREDrgDXKg==",
+			"integrity": "sha512-BYfbO5UocZrtj8t1Baox3ivldbNyoKugZGvwKXl0XZ7FZVGvAMrVmzZSI6KtEvYl9Jey/I8VqkZh30QBflEM0Q==",
 			"requires": {
 				"@umbraco-ui/uui-base": "1.0.0-rc.0"
 			},
@@ -8921,7 +8921,7 @@
 		},
 		"@umbraco-ui/uui-modal-container": {
 			"version": "file:umbraco-ui-uui-modal-container-0.0.0.tgz",
-			"integrity": "sha512-Cpkib1X0f+HS4W6o9NKUw65vaSmJSAccw+o7svbNfWAsZ5EyvyvAWvxpdAfQTtK0EWIqDhKMTo9hjFdXGlceCg==",
+			"integrity": "sha512-nsw2fkpOnG7pU+TqDZqXF57eNw2a4zIyN1TllVNEU4tdPrF5c4vTyIzE5O6Flsu8euCVruDZepo9SyLTm6jnew==",
 			"requires": {
 				"@umbraco-ui/uui-base": "1.0.0-rc.0"
 			},
@@ -8938,7 +8938,7 @@
 		},
 		"@umbraco-ui/uui-modal-dialog": {
 			"version": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz",
-			"integrity": "sha512-YtoIaGPFJaDjX3UFrpap2w6r/LLz8x8GqZkh2wH+imi1EIatyj1eq9zE8LAe+I0IaJ/8SAAEG4kY9OhlVpkhJg==",
+			"integrity": "sha512-hv3LQ/kzTZQMMXDt8NM5ZJTIsEYof5zKx9VFxbUGnhJhNRLeJ4bk9suWVl8h942VsOJwR+NbXzOs4XTIqXb9MA==",
 			"requires": {
 				"@umbraco-ui/uui-base": "1.0.0-rc.0"
 			},
@@ -8955,7 +8955,7 @@
 		},
 		"@umbraco-ui/uui-modal-sidebar": {
 			"version": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz",
-			"integrity": "sha512-KyLsrek2qPjgmZYjKbGkomskyb5Uy4oSIAOuWJPo3nMTEUyTP55Nq1BlXkRqiGPxK/8NYbIHD5TR33G9KSkWDw==",
+			"integrity": "sha512-qQTO/YD3wzACmHf6QVW5c2smWMPougDwyKLV6Zku+QdgeZleS1ZiR/AvqHVHiRjuQ84ZhKyBl4H1IcYnAMntnw==",
 			"requires": {
 				"@umbraco-ui/uui-base": "1.0.0-rc.0"
 			},

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

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 
 import { UmbContextProviderMixin } from '../core/context';
+import { UmbModalService } from '../core/services/modal.service';
 import { UmbNotificationService } from '../core/services/notification.service';
 import { UmbDataTypeStore } from '../core/stores/data-type.store';
 import { UmbNodeStore } from '../core/stores/node.store';
@@ -10,6 +11,7 @@ import { UmbNodeStore } from '../core/stores/node.store';
 import './components/backoffice-header.element';
 import './components/backoffice-main.element';
 import './components/backoffice-notification-container.element';
+import './components/backoffice-modal-container.element';
 import './components/editor-layout.element';
 import './components/editor-property-layout.element';
 import './components/node-property.element';
@@ -38,6 +40,7 @@ export default class UmbBackoffice extends UmbContextProviderMixin(LitElement) {
 		this.provideContext('umbNodeStore', new UmbNodeStore());
 		this.provideContext('umbDataTypeStore', new UmbDataTypeStore());
 		this.provideContext('umbNotificationService', new UmbNotificationService());
+		this.provideContext('umbModalService', new UmbModalService());
 	}
 
 	render() {
@@ -45,6 +48,7 @@ export default class UmbBackoffice extends UmbContextProviderMixin(LitElement) {
 			<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>
 		`;
 	}
 }

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

@@ -0,0 +1,55 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { Subscription } from 'rxjs';
+import { UmbContextConsumerMixin } from '../../core/context';
+import { UmbModalService } from '../../core/services/modal.service';
+
+@customElement('umb-backoffice-modal-container')
+export class UmbBackofficeModalContainer extends UmbContextConsumerMixin(LitElement) {
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			:host {
+				position: absolute;
+			}
+		`,
+	];
+
+	@state()
+	private _modals: any[] = [];
+
+	private _modalService?: UmbModalService;
+	private _modalSubscription?: Subscription;
+
+	constructor() {
+		super();
+
+		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+			this._modalService = modalService;
+			this._modalSubscription?.unsubscribe();
+			this._modalService?.modals.subscribe((modals: Array<any>) => {
+				this._modals = modals;
+				console.log('modals', modals);
+			});
+		});
+	}
+
+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+		this._modalSubscription?.unsubscribe();
+	}
+
+	render() {
+		return html`
+			<uui-modal-container> ${repeat(this._modals, (modal) => html`${modal.modal}`)} </uui-modal-container>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-backoffice-modal-container': UmbBackofficeModalContainer;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts

@@ -7,9 +7,14 @@ import '@umbraco-ui/uui-modal-container';
 import '@umbraco-ui/uui-modal-dialog';
 import '@umbraco-ui/uui-modal-sidebar';
 import { UUIModalSidebarElement } from '@umbraco-ui/uui-modal-sidebar';
+import { UmbContextConsumerMixin } from '../../core/context';
+import { UmbModalService } from '../../core/services/modal.service';
+import { Subscription } from 'rxjs';
+
+import '../../core/services/modal-content-picker.element';
 
 @customElement('umb-property-editor-content-picker')
-class UmbPropertyEditorContentPicker extends LitElement {
+class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -30,39 +35,27 @@ class UmbPropertyEditorContentPicker extends LitElement {
 		`,
 	];
 
-	@state()
-	open = false;
-
 	@query('uui-modal-sidebar')
 	sidebar?: UUIModalSidebarElement;
 
-	private _renderModal() {
-		return this.open
-			? html`<uui-modal-sidebar data-modal-size="small" @closed=${() => (this.open = false)}>
-					<umb-editor-layout>
-						<h3 slot="name">Select content</h3>
-						<uui-box>
-							<uui-input></uui-input>
-							<hr />
-							Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab minima et praesentium rem, nesciunt,
-							blanditiis culpa esse tempore perspiciatis recusandae magni voluptas tempora officiis commodi nihil
-							deserunt quidem aliquid sed?
-						</uui-box>
-						<div slot="actions">
-							<uui-button look="secondary" label="close" @click=${(e: Event) => this.sidebar?.close(e)}
-								>Close</uui-button
-							>
-						</div>
-					</umb-editor-layout>
-			  </uui-modal-sidebar>`
-			: '';
+	private _modalService?: UmbModalService;
+
+	constructor() {
+		super();
+		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+			this._modalService = modalService;
+		});
+	}
+
+	private _open() {
+		const modalHandler = this._modalService?.open('umb-modal-content-picker');
+		modalHandler?.onClose().then((result) => {
+			console.log('result', result);
+		});
 	}
 
 	render() {
-		return html`
-			<uui-button look="primary" @click=${() => (this.open = !this.open)} label="open">Open</uui-button>
-			<uui-modal-container>${this._renderModal()}</uui-modal-container>
-		`;
+		return html` <uui-button look="primary" @click=${this._open} label="open">Open</uui-button> `;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/services/modal-content-picker.element.ts

@@ -0,0 +1,58 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import UmbModalHandler from './modalHandler';
+
+@customElement('umb-modal-content-picker')
+class UmbModalContentPicker extends LitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: 16px;
+				margin-right: 16px;
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	modalHandler?: UmbModalHandler;
+
+	private _close() {
+		this.modalHandler?.close();
+	}
+
+	render() {
+		return html`
+			<umb-editor-layout>
+				<h3 slot="name">Select content</h3>
+				<uui-box>
+					<uui-input></uui-input>
+					<hr />
+					Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab minima et praesentium rem, nesciunt, blanditiis
+					culpa esse tempore perspiciatis recusandae magni voluptas tempora officiis commodi nihil deserunt quidem
+					aliquid sed?
+				</uui-box>
+				<div slot="actions">
+					<uui-button label="close" look="primary" @click=${this._close}></uui-button>
+				</div>
+			</umb-editor-layout>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-modal-content-picker': UmbModalContentPicker;
+	}
+}

src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts

@@ -0,0 +1,26 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import UmbModalHandler from './modalHandler';
+
+export class UmbModalService {
+	private _modals: BehaviorSubject<Array<UmbModalHandler>> = new BehaviorSubject(<Array<UmbModalHandler>>[]);
+	public readonly modals: Observable<Array<UmbModalHandler>> = this._modals.asObservable();
+
+	public createModal(modalHandler: UmbModalHandler): void {
+		this._modals.next([...this._modals.getValue(), modalHandler]);
+	}
+
+	public open(elementName: string): UmbModalHandler {
+		const modalHandler = new UmbModalHandler(elementName);
+		modalHandler.onClose().then(() => this._close(modalHandler));
+		this._modals.next([...this._modals.getValue(), modalHandler]);
+		return modalHandler;
+	}
+
+	private _close(modalHandler: UmbModalHandler) {
+		console.log('close', modalHandler);
+		modalHandler.modal.close();
+		modalHandler.modal.addEventListener('close-end', () =>
+			this._modals.next(this._modals.getValue().filter((modal) => modal.key !== modalHandler.key))
+		);
+	}
+}

src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts

@@ -0,0 +1,34 @@
+export default class UmbModalHandler {
+	private _elementName;
+	private _closeResolver: any;
+	private _closePromise: any;
+
+	public element?: any;
+	public key: string;
+	public modal: any;
+
+	constructor(elementName: string) {
+		this.key = Date.now().toString(); //TODO better key
+		this._elementName = elementName;
+		this._createLayoutElement();
+		this._closePromise = new Promise((res) => {
+			this._closeResolver = res;
+		});
+	}
+
+	private _createLayoutElement() {
+		this.modal = document.createElement('uui-modal-sidebar');
+		this.modal.size = 'small'; //TODO make meta object for settings
+		this.element = document.createElement(this._elementName);
+		this.modal.appendChild(this.element);
+		this.element.modalHandler = this;
+	}
+
+	public close(...args: any) {
+		this._closeResolver(...args);
+	}
+
+	public onClose(): Promise<any> {
+		return this._closePromise;
+	}
+}