@umbraco-cms/backoffice 14.0.0--preview005-1ef9c3f3 → 14.0.0--preview005-a2cfdcbf

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

@@ -9,9 +9,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbBackofficeModalContainerElement_instances, _UmbBackofficeModalContainerElement_createModalElements, _UmbBackofficeModalContainerElement_renderModal;
+var _UmbBackofficeModalContainerElement_instances, _UmbBackofficeModalContainerElement_createModalElements, _UmbBackofficeModalContainerElement_onCloseEnd, _UmbBackofficeModalContainerElement_renderModal;
 import { UmbTextStyles } from '../../../../shared/style/index.js';
-import { css, html, repeat, customElement, state } from '../../../../external/lit/index.js';
+import { css, html, repeat, customElement, state, nothing } from '../../../../external/lit/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalElement } from '../../modal/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 let UmbBackofficeModalContainerElement = class UmbBackofficeModalContainerElement extends UmbLitElement {
@@ -21,6 +21,7 @@ let UmbBackofficeModalContainerElement = class UmbBackofficeModalContainerElemen
         this._modalElementMap = new Map();
         this._modals = [];
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
+            //TODO: This is being called way to many times if first page load includes an open modal.
             this._modalManager = instance;
             this._observeModals();
         });
@@ -28,7 +29,9 @@ let UmbBackofficeModalContainerElement = class UmbBackofficeModalContainerElemen
     _observeModals() {
         if (!this._modalManager)
             return;
-        this.observe(this._modalManager.modals, (modals) => __classPrivateFieldGet(this, _UmbBackofficeModalContainerElement_instances, "m", _UmbBackofficeModalContainerElement_createModalElements).call(this, modals));
+        this.observe(this._modalManager.modals, (modals) => {
+            __classPrivateFieldGet(this, _UmbBackofficeModalContainerElement_instances, "m", _UmbBackofficeModalContainerElement_createModalElements).call(this, modals);
+        });
     }
     render() {
         return html `
@@ -42,7 +45,13 @@ let UmbBackofficeModalContainerElement = class UmbBackofficeModalContainerElemen
 };
 _UmbBackofficeModalContainerElement_instances = new WeakSet();
 _UmbBackofficeModalContainerElement_createModalElements = function _UmbBackofficeModalContainerElement_createModalElements(modals) {
+    const oldValue = this._modals;
     this._modals = modals;
+    const oldModals = oldValue.filter((oldModal) => !modals.some((modal) => modal.key === oldModal.key));
+    oldModals.forEach((modal) => {
+        this._modalElementMap.get(modal.key)?.removeEventListener('close-end', __classPrivateFieldGet(this, _UmbBackofficeModalContainerElement_instances, "m", _UmbBackofficeModalContainerElement_onCloseEnd).bind(this, modal.key));
+        this._modalElementMap.delete(modal.key);
+    });
     if (this._modals.length === 0) {
         this._modalElementMap.clear();
         return;
@@ -52,14 +61,18 @@ _UmbBackofficeModalContainerElement_createModalElements = function _UmbBackoffic
             return;
         const modalElement = new UmbModalElement();
         modalElement.modalContext = modal;
-        modalElement.element?.addEventListener('close-end', () => this._modalManager?.remove(modal.key));
+        modalElement.element?.addEventListener('close-end', __classPrivateFieldGet(this, _UmbBackofficeModalContainerElement_instances, "m", _UmbBackofficeModalContainerElement_onCloseEnd).bind(this, modal.key));
         this._modalElementMap.set(modal.key, modalElement);
+        this.requestUpdate();
     });
 };
+_UmbBackofficeModalContainerElement_onCloseEnd = function _UmbBackofficeModalContainerElement_onCloseEnd(key) {
+    this._modalManager?.remove(key);
+};
 _UmbBackofficeModalContainerElement_renderModal = function _UmbBackofficeModalContainerElement_renderModal(key) {
     const modalElement = this._modalElementMap.get(key);
     if (!modalElement)
-        return;
+        return nothing;
     return modalElement.render();
 };
 UmbBackofficeModalContainerElement.styles = [

package/dist-cms/packages/core/modal/modal.element.d.ts

@@ -1,7 +1,7 @@
 import type { UmbModalContext } from './modal.context.js';
 import type { CSSResultGroup } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
-import type { UUIModalDialogElement, UUIModalSidebarElement } from '../../../external/uui/index.js';
+import { type UUIModalDialogElement, type UUIModalSidebarElement } from '../../../external/uui/index.js';
 export declare class UmbModalElement extends UmbLitElement {
     #private;
     get modalContext(): UmbModalContext | undefined;

package/dist-cms/packages/core/modal/modal.element.js

@@ -15,13 +15,14 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _UmbModalElement_instances, _UmbModalElement_modalContext, _UmbModalElement_innerElement, _UmbModalElement_modalExtensionObserver, _UmbModalElement_modalRouterElement, _UmbModalElement_createModalElement, _UmbModalElement_createContainerElement, _UmbModalElement_createSidebarElement, _UmbModalElement_createDialogElement, _UmbModalElement_observeModal, _UmbModalElement_createInnerElement, _UmbModalElement_appendInnerElement, _UmbModalElement_removeInnerElement, _UmbModalElement_destroy;
+var _UmbModalElement_instances, _UmbModalElement_modalContext, _UmbModalElement_innerElement, _UmbModalElement_modalExtensionObserver, _UmbModalElement_modalRouterElement, _UmbModalElement_onClose, _UmbModalElement_createModalElement, _UmbModalElement_createContainerElement, _UmbModalElement_createSidebarElement, _UmbModalElement_createDialogElement, _UmbModalElement_observeModal, _UmbModalElement_createInnerElement, _UmbModalElement_appendInnerElement, _UmbModalElement_removeInnerElement, _UmbModalElement_destroy;
 import { UMB_MODAL_CONTEXT } from './modal.context.js';
 import { umbExtensionsRegistry } from '../extension-registry/index.js';
 import { UmbTextStyles } from '../../../shared/style/index.js';
 import { html, customElement } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 import { BehaviorSubject } from '../../../external/rxjs/index.js';
+import { UUIModalCloseEvent, } from '../../../external/uui/index.js';
 import { createExtensionElement } from '../../../libs/extension-api/index.js';
 import { UMB_CONTENT_REQUEST_EVENT_TYPE, UmbContextProvider } from '../../../libs/context-api/index.js';
 let UmbModalElement = class UmbModalElement extends UmbLitElement {
@@ -32,6 +33,10 @@ let UmbModalElement = class UmbModalElement extends UmbLitElement {
         _UmbModalElement_innerElement.set(this, new BehaviorSubject(undefined));
         _UmbModalElement_modalExtensionObserver.set(this, void 0);
         _UmbModalElement_modalRouterElement.set(this, document.createElement('umb-router-slot'));
+        _UmbModalElement_onClose.set(this, () => {
+            this.element?.removeEventListener(UUIModalCloseEvent, __classPrivateFieldGet(this, _UmbModalElement_onClose, "f"));
+            __classPrivateFieldGet(this, _UmbModalElement_modalContext, "f")?.reject({ type: 'close' });
+        });
     }
     get modalContext() {
         return __classPrivateFieldGet(this, _UmbModalElement_modalContext, "f");
@@ -56,11 +61,14 @@ _UmbModalElement_modalContext = new WeakMap();
 _UmbModalElement_innerElement = new WeakMap();
 _UmbModalElement_modalExtensionObserver = new WeakMap();
 _UmbModalElement_modalRouterElement = new WeakMap();
+_UmbModalElement_onClose = new WeakMap();
 _UmbModalElement_instances = new WeakSet();
 _UmbModalElement_createModalElement = function _UmbModalElement_createModalElement() {
     if (!__classPrivateFieldGet(this, _UmbModalElement_modalContext, "f"))
         return;
     this.element = __classPrivateFieldGet(this, _UmbModalElement_instances, "m", _UmbModalElement_createContainerElement).call(this);
+    // Makes sure that the modal triggers the reject of the context promise when it is closed by pressing escape.
+    this.element.addEventListener(UUIModalCloseEvent, __classPrivateFieldGet(this, _UmbModalElement_onClose, "f"));
     if (__classPrivateFieldGet(this, _UmbModalElement_modalContext, "f").originTarget) {
         // The following code is the context api proxy.
         // It re-dispatches the context api request event to the origin target of this modal, in other words the element that initiated the modal.