@umbraco-cms/backoffice 14.0.0--preview004-efeba5b0 → 14.0.0--preview004-62c3fc89

package/dist-cms/custom-elements.json

@@ -1597,9 +1597,6 @@
         {
           "name": "configuration"
         },
-        {
-          "name": "modalContext"
-        },
         {
           "name": "styles",
           "type": "array",
@@ -2534,6 +2531,23 @@
         }
       ]
     },
+    {
+      "name": "umb-modal",
+      "path": "./../src/packages/core/modal/modal.element.ts",
+      "properties": [
+        {
+          "name": "modalContext",
+          "type": "UmbModalContext<object, any> | undefined"
+        },
+        {
+          "name": "element"
+        },
+        {
+          "name": "styles",
+          "default": "[\"UmbTextStyles\"]"
+        }
+      ]
+    },
     {
       "name": "umb-notification-layout-default",
       "path": "./../src/packages/core/notification/layouts/default/notification-layout-default.element.ts",

package/dist-cms/libs/extension-api/controller/extension-element-controller.js

@@ -48,7 +48,6 @@ export class UmbExtensionElementController extends UmbBaseExtensionController {
     };
     async _conditionsAreGood() {
         const manifest = this.manifest; // In this case we are sure its not undefined.
-        console.log("---defaultElement", this._defaultElement);
         if (isManifestElementableType(manifest)) {
             const newComponent = await createExtensionElement(manifest, this._defaultElement);
             if (!this._positive) {

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

@@ -1,8 +1,11 @@
 import { CSSResultGroup } from '../../../../external/lit/index.js';
+import { UmbModalContext } from '../../modal/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export declare class UmbBackofficeModalContainerElement extends UmbLitElement {
-    private _modals?;
-    private _modalContext?;
+    #private;
+    private _modalElementMap;
+    _modals: Array<UmbModalContext>;
+    private _modalManager?;
     constructor();
     private _observeModals;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -6,27 +6,55 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { css, html, repeat, customElement, state } from '../../../../external/lit/index.js';
-import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../modal/index.js';
+import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalElement, } from '../../modal/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export let UmbBackofficeModalContainerElement = class UmbBackofficeModalContainerElement extends UmbLitElement {
     constructor() {
         super();
+        this._modalElementMap = new Map();
+        this._modals = [];
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
-            this._modalContext = instance;
+            this._modalManager = instance;
             this._observeModals();
         });
     }
     _observeModals() {
-        if (!this._modalContext)
+        if (!this._modalManager)
             return;
-        this.observe(this._modalContext.modals, (modals) => {
-            this._modals = modals;
+        this.observe(this._modalManager.modals, (modals) => this.#createModalElements(modals));
+    }
+    /** We cannot render the umb-modal element directly in the uui-modal-container because it wont get reconised by UUI.
+     * We therefore have a helper class which creates the uui-modal element and returns it. */
+    #createModalElements(modals) {
+        this._modals = modals;
+        if (this._modals.length === 0) {
+            this._modalElementMap.clear();
+            return;
+        }
+        this._modals.forEach((modal) => {
+            if (this._modalElementMap.has(modal.key))
+                return;
+            const modalElement = new UmbModalElement();
+            modalElement.modalContext = modal;
+            // TODO: We need to change this to the close-end event, when it is added to UUI again.
+            // This solution solves the memory leak issue where the modal contexts where not removed from the manager when they are closed.
+            // It breaks the modal animation though, so we need to wait for the close-end so we are sure the animation is done.
+            modalElement.element?.addEventListener('close', () => this._modalManager?.remove(modal.key));
+            this._modalElementMap.set(modal.key, modalElement);
         });
     }
+    #renderModal(key) {
+        const modalElement = this._modalElementMap.get(key);
+        if (!modalElement)
+            return;
+        return modalElement.render();
+    }
     render() {
         return html `
 			<uui-modal-container>
-				${this._modals ? repeat(this._modals, (modalContext) => html `${modalContext.modalElement}`) : ''}
+				${this._modals.length > 0
+            ? repeat(this._modals, (modal) => modal.key, (modal) => this.#renderModal(modal.key))
+            : ''}
 			</uui-modal-container>
 		`;
     }
@@ -40,6 +68,9 @@ export let UmbBackofficeModalContainerElement = class UmbBackofficeModalContaine
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbBackofficeModalContainerElement.prototype, "_modalElementMap", void 0);
 __decorate([
     state()
 ], UmbBackofficeModalContainerElement.prototype, "_modals", void 0);

package/dist-cms/packages/core/components/input-tiny-mce/input-tiny-mce.element.d.ts

@@ -1,5 +1,4 @@
 import { PropertyValueMap } from '../../../../external/lit/index.js';
-import { UmbModalContext } from '../../modal/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UmbPropertyEditorConfigCollection } from '../../property-editor/index.js';
 declare const UmbInputTinyMceElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
@@ -7,7 +6,6 @@ export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base
     #private;
     configuration?: UmbPropertyEditorConfigCollection;
     private _tinyConfig;
-    modalContext: UmbModalContext;
     protected getFormElement(): HTMLIFrameElement | undefined;
     private _editorElement?;
     constructor();

package/dist-cms/packages/core/components/input-tiny-mce/input-tiny-mce.element.js

@@ -14,7 +14,6 @@ import { hasDefaultExport, loadExtension } from '../../../../libs/extension-api/
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 import { css, customElement, html, property, query, state, } from '../../../../external/lit/index.js';
 import { firstValueFrom } from '../../../../external/rxjs/index.js';
-import { UMB_MODAL_CONTEXT_TOKEN } from '../../modal/index.js';
 import { UmbMediaHelper } from '../../../../shared/utils/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 // TODO => integrate macro picker, update stylesheet fetch when backend CLI exists (ref tinymce.service.js in existing backoffice)
@@ -33,9 +32,6 @@ export let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormCon
         this.#mediaHelper = new UmbMediaHelper();
         this.#plugins = [];
         this.#editorRef = null;
-        this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (modalContext) => {
-            this.modalContext = modalContext;
-        });
         // TODO => this breaks tests, removing for now will ignore user language
         // and fall back to tinymce default language
         // this.consumeContext(UMB_AUTH, (instance) => {

package/dist-cms/packages/core/culture/components/input-culture-select/input-culture-select.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UmbChangeEvent } from '../../../event/index.js';
 import { UmbCultureRepository } from '../../repository/culture.repository.js';
+import { UmbChangeEvent } from '../../../event/index.js';
 import { html, repeat, ifDefined, customElement, property, state } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';

package/dist-cms/packages/core/extension-registry/interfaces/modal-extension-element.interface.d.ts

@@ -1,7 +1,7 @@
 import type { ManifestModal } from '../models/index.js';
 import type { UmbModalContext } from '../../modal/index.js';
-export interface UmbModalExtensionElement<UmbModalData extends object = object, UmbModalResult = unknown, ModalManifestType extends ManifestModal = ManifestModal> extends HTMLElement {
+export interface UmbModalExtensionElement<UmbModalData extends object = object, UmbModalValue = unknown, ModalManifestType extends ManifestModal = ManifestModal> extends HTMLElement {
     manifest?: ModalManifestType;
-    modalContext?: UmbModalContext<UmbModalData, UmbModalResult>;
+    modalContext?: UmbModalContext<UmbModalData, UmbModalValue>;
     data?: UmbModalData;
 }

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

@@ -1,7 +1,7 @@
 import { type UmbCodeEditorElement } from '../../../../templating/code-editor/index.js';
-import { UmbCodeEditorModalData, UmbCodeEditorModalResult } from '../../index.js';
+import { UmbCodeEditorModalData, UmbCodeEditorModalValue } from '../../index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
-export declare class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditorModalData, UmbCodeEditorModalResult> {
+export declare class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditorModalData, UmbCodeEditorModalValue> {
     #private;
     isCodeEditorReady: import("rxjs").Observable<boolean>;
     _codeEditor?: UmbCodeEditorElement;

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

@@ -1,7 +1,7 @@
-import { UmbConfirmModalData, UmbConfirmModalResult, UmbModalContext } from '../../index.js';
+import { UmbConfirmModalData, UmbConfirmModalValue, UmbModalContext } from '../../index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 export declare class UmbConfirmModalElement extends UmbLitElement {
-    modalContext?: UmbModalContext<UmbConfirmModalData, UmbConfirmModalResult>;
+    modalContext?: UmbModalContext<UmbConfirmModalData, UmbConfirmModalValue>;
     data?: UmbConfirmModalData;
     private _handleConfirm;
     private _handleCancel;

package/dist-cms/packages/core/modal/common/confirm/confirm-modal.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 { html, customElement, property } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 export let UmbConfirmModalElement = class UmbConfirmModalElement extends UmbLitElement {
     _handleConfirm() {

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

@@ -1,6 +1,6 @@
-import { UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalResult } from '../../index.js';
+import { UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue } from '../../index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
-export declare class UmbEmbeddedMediaModalElement extends UmbModalBaseElement<UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalResult> {
+export declare class UmbEmbeddedMediaModalElement extends UmbModalBaseElement<UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue> {
     #private;
     private _model;
     connectedCallback(): void;

package/dist-cms/packages/core/modal/common/embedded-media/embedded-media-modal.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 { css, html, unsafeHTML, when, customElement, state } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { OEmbedStatus, } from '../../index.js';
 import { umbracoPath } from '../../../../../shared/utils/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
@@ -145,13 +145,13 @@ export let UmbEmbeddedMediaModalElement = class UmbEmbeddedMediaModalElement ext
 					</umb-workspace-property-layout>
 
 					${when(this.#embedResult?.oEmbedStatus === OEmbedStatus.Success || this._model.a11yInfo, () => html ` <umb-workspace-property-layout label="Preview" orientation="vertical">
-							<div slot="editor">
-								${when(this.#loading, () => html `<uui-loader-circle></uui-loader-circle>`)}
-								${when(this.#embedResult?.markup, () => html `${unsafeHTML(this.#embedResult.markup)}`)}
-								${when(this._model.info, () => html ` <p aria-hidden="true">${this._model.info}</p>`)}
-								${when(this._model.a11yInfo, () => html ` <p class="sr-only" role="alert">${this._model.a11yInfo}</p>`)}
-							</div>
-						</umb-workspace-property-layout>`)}
+								<div slot="editor">
+									${when(this.#loading, () => html `<uui-loader-circle></uui-loader-circle>`)}
+									${when(this.#embedResult?.markup, () => html `${unsafeHTML(this.#embedResult.markup)}`)}
+									${when(this._model.info, () => html ` <p aria-hidden="true">${this._model.info}</p>`)}
+									${when(this._model.a11yInfo, () => html ` <p class="sr-only" role="alert">${this._model.a11yInfo}</p>`)}
+								</div>
+							</umb-workspace-property-layout>`)}
 
 					<umb-workspace-property-layout label="Width" orientation="vertical">
 						<uui-input

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

@@ -1,9 +1,9 @@
-import { UmbFolderModalData, UmbFolderModalResult, UmbModalContext } from '../../index.js';
+import { UmbFolderModalData, UmbFolderModalValue, UmbModalContext } from '../../index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { FolderResponseModel } from '../../../../../external/backend-api/index.js';
 export declare class UmbFolderModalElement extends UmbLitElement {
     #private;
-    modalContext?: UmbModalContext<UmbFolderModalData, UmbFolderModalResult>;
+    modalContext?: UmbModalContext<UmbFolderModalData, UmbFolderModalValue>;
     private _data?;
     get data(): UmbFolderModalData | undefined;
     set data(value: UmbFolderModalData | undefined);

package/dist-cms/packages/core/modal/common/folder/folder-modal.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 { css, html, customElement, property, query, state } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { createExtensionApi } from '../../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../../extension-registry/index.js';

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

@@ -1,6 +1,6 @@
-import { UmbIconPickerModalData, UmbIconPickerModalResult } from '../../index.js';
+import { UmbIconPickerModalData, UmbIconPickerModalValue } from '../../index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
-export declare class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPickerModalData, UmbIconPickerModalResult> {
+export declare class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPickerModalData, UmbIconPickerModalValue> {
     private _iconList;
     private _iconListFiltered;
     private _colorList;

package/dist-cms/packages/core/modal/common/icon-picker/icon-picker-modal.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import icons from '../../../../../shared/icon-registry/icons/icons.json' assert { type: 'json' };
 import { css, html, styleMap, customElement, state } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 // TODO: Make use of UmbPickerLayoutBase
 // TODO: to prevent element extension we need to move the Picker logic into a separate class we can reuse across all pickers
@@ -76,7 +76,9 @@ export let UmbIconPickerModalElement = class UmbIconPickerModalElement extends U
 						.value="${this._currentColor || ''}"
 						label="Color switcher for icons"
 						@change="${this._onColorChange}">
-						${this._colorList.map((color) => html ` <uui-color-swatch label="${color}" title="${color}" value="${color}"></uui-color-swatch> `)}
+						${this._colorList.map((color) => html `
+								<uui-color-swatch label="${color}" title="${color}" value="${color}"></uui-color-swatch>
+							`)}
 					</uui-color-swatches>
 
 					<hr />

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

@@ -1,6 +1,6 @@
-import { UmbLinkPickerConfig, UmbLinkPickerLink, UmbLinkPickerModalData, UmbLinkPickerModalResult } from '../../index.js';
+import { UmbLinkPickerConfig, UmbLinkPickerLink, UmbLinkPickerModalData, UmbLinkPickerModalValue } from '../../index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
-export declare class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPickerModalData, UmbLinkPickerModalResult> {
+export declare class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPickerModalData, UmbLinkPickerModalValue> {
     _selectedKey?: string;
     _index: number | null;
     _link: UmbLinkPickerLink;

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

@@ -1,12 +1,12 @@
 import { PropertyValueMap } from '../../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
-import { UmbPropertySettingsModalResult, UmbPropertySettingsModalData } from '../../index.js';
-export declare class UmbPropertySettingsModalElement extends UmbModalBaseElement<UmbPropertySettingsModalData, UmbPropertySettingsModalResult> {
+import { UmbPropertySettingsModalValue, UmbPropertySettingsModalData } from '../../index.js';
+export declare class UmbPropertySettingsModalElement extends UmbModalBaseElement<UmbPropertySettingsModalData, UmbPropertySettingsModalValue> {
     #private;
     private _customValidationOptions;
     private _aliasLocked;
-    protected _ownerDocumentType?: UmbPropertySettingsModalResult;
-    protected _returnData: UmbPropertySettingsModalResult;
+    protected _ownerDocumentType?: UmbPropertySettingsModalValue;
+    protected _returnData: UmbPropertySettingsModalValue;
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/core/modal/common/property-settings/property-settings-modal.element.js

@@ -299,21 +299,19 @@ export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalEleme
             : nothing} `;
     }
     #renderVariationControls() {
-        return this._ownerDocumentType?.variesByCulture || this._ownerDocumentType?.variesBySegment ?
-            html `
-			<div class="container">
-				<b>Variation</b>
-				${this._ownerDocumentType?.variesByCulture ? this.#renderVaryByCulture() : ''}
-			</div>
-			<hr />`
+        return this._ownerDocumentType?.variesByCulture || this._ownerDocumentType?.variesBySegment
+            ? html ` <div class="container">
+						<b>Variation</b>
+						${this._ownerDocumentType?.variesByCulture ? this.#renderVaryByCulture() : ''}
+					</div>
+					<hr />`
             : '';
     }
     #renderVaryByCulture() {
         return html `<uui-toggle
-				@change=${this.#onVaryByCultureChange}
-				.checked=${this._returnData.variesByCulture ?? false}
-				label="Vary by culture"></uui-toggle>
-			`;
+			@change=${this.#onVaryByCultureChange}
+			.checked=${this._returnData.variesByCulture ?? false}
+			label="Vary by culture"></uui-toggle> `;
     }
     static { this.styles = [
         UmbTextStyles,

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

@@ -1,6 +1,6 @@
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
-import { UmbSectionPickerModalData, UmbSectionPickerModalResult } from '../../index.js';
-export declare class UmbSectionPickerModalElement extends UmbModalBaseElement<UmbSectionPickerModalData, UmbSectionPickerModalResult> {
+import { UmbSectionPickerModalData, UmbSectionPickerModalValue } from '../../index.js';
+export declare class UmbSectionPickerModalElement extends UmbModalBaseElement<UmbSectionPickerModalData, UmbSectionPickerModalValue> {
     #private;
     private _sections;
     connectedCallback(): void;

package/dist-cms/packages/core/modal/common/section-picker/section-picker-modal.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { css, html, customElement, state } from '../../../../../external/lit/index.js';
 import { UmbSelectionManagerBase } from '../../../../../shared/utils/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';

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

@@ -1,8 +1,8 @@
 import type { UmbCodeEditorElement } from '../../../../templating/code-editor/index.js';
-import { UmbTemplateModalData, UmbTemplateModalResult } from '../../index.js';
+import { UmbTemplateModalData, UmbTemplateModalValue } from '../../index.js';
 import { TemplateResponseModel } from '../../../../../external/backend-api/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
-export declare class UmbTemplateModalElement extends UmbModalBaseElement<UmbTemplateModalData, UmbTemplateModalResult> {
+export declare class UmbTemplateModalElement extends UmbModalBaseElement<UmbTemplateModalData, UmbTemplateModalValue> {
     #private;
     _id: string;
     _template?: TemplateResponseModel;

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

@@ -1,7 +1,7 @@
-import { UmbTreePickerModalData, UmbPickerModalResult } from '../../index.js';
+import { UmbTreePickerModalData, UmbPickerModalValue } from '../../index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 import { TreeItemPresentationModel } from '../../../../../external/backend-api/index.js';
-export declare class UmbTreePickerModalElement<TreeItemType extends TreeItemPresentationModel> extends UmbModalBaseElement<UmbTreePickerModalData<TreeItemType>, UmbPickerModalResult> {
+export declare class UmbTreePickerModalElement<TreeItemType extends TreeItemPresentationModel> extends UmbModalBaseElement<UmbTreePickerModalData<TreeItemType>, UmbPickerModalValue> {
     #private;
     _selection: Array<string | null>;
     _multiple: boolean;

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

@@ -1,6 +1,8 @@
+import './modal.element.js';
 export * from './modal-manager.context.js';
-export * from './modal-context.js';
+export * from './modal.context.js';
 export * from './modal-route-registration.js';
 export * from './modal-route-registration.controller.js';
 export * from './token/index.js';
 export * from './modal.interfaces.js';
+export * from './modal.element.js';

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

@@ -1,6 +1,8 @@
+import './modal.element.js';
 export * from './modal-manager.context.js';
-export * from './modal-context.js';
+export * from './modal.context.js';
 export * from './modal-route-registration.js';
 export * from './modal-route-registration.controller.js';
 export * from './token/index.js';
 export * from './modal.interfaces.js';
+export * from './modal.element.js';

package/dist-cms/packages/core/modal/modal-manager.context.d.ts

@@ -25,7 +25,7 @@ export declare class UmbModalManagerContext {
      * @return {*}  {UmbModalHandler}
      * @memberof UmbModalManagerContext
      */
-    open<ModalData extends object = object, ModalResult = unknown>(modalAlias: string | UmbModalToken<ModalData, ModalResult>, data?: ModalData, config?: UmbModalConfig, router?: IRouterSlot | null): UmbModalContext<ModalData, ModalResult>;
+    open<ModalData extends object = object, ModalValue = unknown>(modalAlias: string | UmbModalToken<ModalData, ModalValue>, data?: ModalData, config?: UmbModalConfig, router?: IRouterSlot | null): UmbModalContext<ModalData, ModalValue>;
     /**
      * Closes a modal or sidebar modal
      * @private
@@ -33,5 +33,6 @@ export declare class UmbModalManagerContext {
      * @memberof UmbModalManagerContext
      */
     close(key: string): void;
+    remove(key: string): void;
 }
 export declare const UMB_MODAL_MANAGER_CONTEXT_TOKEN: UmbContextToken<UmbModalManagerContext, UmbModalManagerContext>;

package/dist-cms/packages/core/modal/modal-manager.context.js

@@ -22,8 +22,7 @@ export class UmbModalManagerContext {
      * @memberof UmbModalManagerContext
      */
     open(modalAlias, data, config, router = null) {
-        const modalContext = new UmbModalContextClass(this.host, router, modalAlias, data, config);
-        modalContext.modalElement.addEventListener('close-end', () => this.#onCloseEnd(modalContext));
+        const modalContext = new UmbModalContextClass(router, modalAlias, data, config);
         this.#modals.next(appendToFrozenArray(this.#modals.getValue(), modalContext, (entry) => entry.key === modalContext.key));
         return modalContext;
     }
@@ -39,18 +38,8 @@ export class UmbModalManagerContext {
             modal.reject();
         }
     }
-    #remove(key) {
+    remove(key) {
         this.#modals.next(this.#modals.getValue().filter((modal) => modal.key !== key));
     }
-    /**
-     * Handles the close-end event
-     * @private
-     * @param {UmbModalContext} modalContext
-     * @memberof UmbModalManagerContext
-     */
-    #onCloseEnd(modalContext) {
-        modalContext.modalElement.removeEventListener('close-end', () => this.#onCloseEnd(modalContext));
-        this.#remove(modalContext.key);
-    }
 }
 export const UMB_MODAL_MANAGER_CONTEXT_TOKEN = new UmbContextToken('UmbModalManagerContext');

package/dist-cms/packages/core/modal/modal-route-registration.d.ts

@@ -1,4 +1,4 @@
-import { UmbModalContext } from './modal-context.js';
+import { UmbModalContext } from './modal.context.js';
 import { UmbModalConfig, UmbModalManagerContext } from './modal-manager.context.js';
 import { UmbModalToken } from './token/modal-token.js';
 import type { IRouterSlot } from '../../../external/router-slot/index.js';
@@ -31,5 +31,5 @@ export declare class UmbModalRouteRegistration<UmbModalTokenData extends object
     onSetup(callback: (routingInfo: Params) => Promise<UmbModalTokenData | false> | UmbModalTokenData | false): this;
     onSubmit(callback: (data: UmbModalTokenResult) => void): this;
     onReject(callback: () => void): this;
-    routeSetup(router: IRouterSlot, modalContext: UmbModalManagerContext, params: Params): Promise<UmbModalContext<UmbModalTokenData, UmbModalTokenResult> | null | undefined>;
+    routeSetup(router: IRouterSlot, modalManagerContext: UmbModalManagerContext, params: Params): Promise<UmbModalContext<UmbModalTokenData, UmbModalTokenResult> | null | undefined>;
 }

package/dist-cms/packages/core/modal/modal-route-registration.js

@@ -8,7 +8,7 @@ export class UmbModalRouteRegistration {
     #onSetupCallback;
     #onSubmitCallback;
     #onRejectCallback;
-    #modalContext;
+    #modalManagerContext;
     #routeBuilder;
     #urlBuilderCallback;
     // Notice i removed the key in the transferring to this class.
@@ -40,7 +40,7 @@ export class UmbModalRouteRegistration {
      * Returns true if the modal is currently active.
      */
     get active() {
-        return !!this.#modalContext;
+        return !!this.#modalManagerContext;
     }
     open(params, prepend) {
         if (this.active)
@@ -51,7 +51,7 @@ export class UmbModalRouteRegistration {
      * Returns the modal handler if the modal is currently active. Otherwise its undefined.
      */
     get modalContext() {
-        return this.#modalContext;
+        return this.#modalManagerContext;
     }
     observeRouteBuilder(callback) {
         this.#urlBuilderCallback = callback;
@@ -75,21 +75,21 @@ export class UmbModalRouteRegistration {
     }
     #onSubmit = (data) => {
         this.#onSubmitCallback?.(data);
-        this.#modalContext = undefined;
+        this.#modalManagerContext = undefined;
     };
     #onReject = () => {
         this.#onRejectCallback?.();
-        this.#modalContext = undefined;
+        this.#modalManagerContext = undefined;
     };
-    async routeSetup(router, modalContext, params) {
+    async routeSetup(router, modalManagerContext, params) {
         // If already open, don't do anything:
         if (this.active)
             return;
         const modalData = this.#onSetupCallback ? await this.#onSetupCallback(params) : undefined;
         if (modalData !== false) {
-            this.#modalContext = modalContext.open(this.#modalAlias, modalData, this.modalConfig, router);
-            this.#modalContext.onSubmit().then(this.#onSubmit, this.#onReject);
-            return this.#modalContext;
+            this.#modalManagerContext = modalManagerContext.open(this.#modalAlias, modalData, this.modalConfig, router);
+            this.#modalManagerContext.onSubmit().then(this.#onSubmit, this.#onReject);
+            return this.#modalManagerContext;
         }
         return null;
     }

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

@@ -0,0 +1,65 @@
+import { UmbModalConfig, UmbModalType } from './modal-manager.context.js';
+import { UmbModalToken } from './token/modal-token.js';
+import type { IRouterSlot } from '../../../external/router-slot/index.js';
+import type { UUIModalSidebarSize } from '../../../external/uui/index.js';
+import { UmbContextToken } from '../../../libs/context-api/index.js';
+/**
+ * Type which omits the real submit method, and replaces it with a submit method which accepts an optional argument depending on the generic type.
+ */
+export type UmbModalContext<ModalData extends object = object, ModalValue = any> = Omit<UmbModalContextClass<ModalData, ModalValue>, 'submit'> & OptionalSubmitArgumentIfUndefined<ModalValue>;
+type OptionalSubmitArgumentIfUndefined<T> = T extends undefined ? {
+    submit: () => void;
+} : T extends unknown ? {
+    submit: (arg?: T) => void;
+} : {
+    submit: (arg: T) => void;
+};
+export declare class UmbModalContextClass<ModalPreset extends object = object, ModalValue = unknown> extends EventTarget {
+    #private;
+    readonly key: string;
+    readonly data: ModalPreset;
+    readonly type: UmbModalType;
+    readonly size: UUIModalSidebarSize;
+    readonly router: IRouterSlot | null;
+    readonly alias: string | UmbModalToken<ModalPreset, ModalValue>;
+    readonly value: import("rxjs").Observable<ModalValue | undefined>;
+    constructor(router: IRouterSlot | null, modalAlias: string | UmbModalToken<ModalPreset, ModalValue>, data?: ModalPreset, config?: UmbModalConfig);
+    /**
+     * Submits this modal, returning with a value to the initiator of the modal.
+     * @public
+     * @memberof UmbModalContext
+     */
+    private submit;
+    /**
+     * Closes this modal
+     * @public
+     * @memberof UmbModalContext
+     */
+    reject(): void;
+    /**
+     * Gives a Promise which will be resolved when this modal is submitted.
+     * @public
+     * @memberof UmbModalContext
+     */
+    onSubmit(): Promise<ModalValue>;
+    /**
+     * Gives the current value of this modal.
+     * @public
+     * @memberof UmbModalContext
+     */
+    getValue(): ModalValue | undefined;
+    /**
+     * Sets the current value of this modal.
+     * @public
+     * @memberof UmbModalContext
+     */
+    setValue(value: ModalValue): void;
+    /**
+     * Updates the current value of this modal.
+     * @public
+     * @memberof UmbModalContext
+     */
+    updateValue(partialValue: Partial<ModalValue>): void;
+}
+export declare const UMB_MODAL_CONTEXT_TOKEN: UmbContextToken<UmbModalContext<object, any>, UmbModalContext<object, any>>;
+export {};