@umbraco-cms/backoffice 17.1.0 → 17.2.0-rc2

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

@@ -61,8 +61,7 @@ let UmbIconPickerModalElement = class UmbIconPickerModalElement extends UmbModal
         return html `
 			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectIcon')}>
 				<div id="container">
-					${this.renderSearch()}
-					${this.renderColors()}
+					${this.renderSearch()} ${this.renderColors()}
 					<uui-scroll-container id="icons">
 						${this.data?.showEmptyOption && !this._isSearching
             ? html `
@@ -117,16 +116,15 @@ let UmbIconPickerModalElement = class UmbIconPickerModalElement extends UmbModal
 						label=${this.localize.term('defaultdialogs_colorSwitcher')}
 						@change=${this.#onColorChange}>
 						${this._colorList.map((color) => html `
-									<uui-color-swatch
-										label=${this.localize.term('colors_' + toCamelCase(color.alias))}
-										title=${this.localize.term('colors_' + toCamelCase(color.alias))}
-										value=${color.alias}
-										style="--uui-swatch-color: var(${color.varName})">
-									</uui-color-swatch>
-								`)}
+								<uui-color-swatch
+									label=${this.localize.term('colors_' + toCamelCase(color.alias))}
+									title=${this.localize.term('colors_' + toCamelCase(color.alias))}
+									value=${color.alias}
+									style="--uui-swatch-color: var(${color.varName})">
+								</uui-color-swatch>
+							`)}
 					</uui-color-swatches>
-					<hr />
-			`;
+					<hr /> `;
     }
     renderIcons() {
         return this._iconsFiltered

package/dist-cms/packages/core/menu/menu-variant-tree-structure-workspace-context-base.js

@@ -4,7 +4,7 @@ import { createExtensionApiByAlias } from '../extension-registry/index.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
 import { UmbArrayState, UmbObjectState } from '../../../libs/observable-api/index.js';
 import { UmbAncestorsEntityContext, UmbParentEntityContext } from '../entity/index.js';
-import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT, UMB_VARIANT_WORKSPACE_CONTEXT, UMB_WORKSPACE_PATH_PATTERN, } from '../workspace/index.js';
+import { UMB_SUBMITTABLE_TREE_ENTITY_WORKSPACE_CONTEXT, UMB_VARIANT_WORKSPACE_CONTEXT, UMB_WORKSPACE_EDIT_PATH_PATTERN, UMB_WORKSPACE_EDIT_VARIANT_PATH_PATTERN, } from '../workspace/index.js';
 import { linkEntityExpansionEntries } from '../utils/index.js';
 import { UMB_MODAL_CONTEXT } from '../modal/index.js';
 import { UMB_SECTION_CONTEXT } from '../section/index.js';
@@ -73,25 +73,29 @@ export class UmbMenuVariantTreeStructureWorkspaceContextBase extends UmbContextB
     }
     getItemHref(structureItem) {
         const sectionName = this._sectionContext?.getPathname();
-        if (!sectionName) {
+        if (!sectionName)
+            return undefined;
+        const unique = structureItem.unique;
+        if (!unique)
             return undefined;
-        }
-        UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({
-            sectionName,
-            entityType: structureItem.entityType,
-        });
-        const path = `section/${this._sectionContext.getPathname()}/workspace/${structureItem.entityType}/edit/${structureItem.unique}`;
         // find related variant id from structure item:
-        const itemVariantFit = structureItem.variants.find((variant) => {
-            return (variant.culture === this.#workspaceActiveVariantId?.culture &&
-                variant.segment === this.#workspaceActiveVariantId?.segment);
-        });
+        const itemVariantFit = structureItem.variants.find((variant) => variant.culture === this.#workspaceActiveVariantId?.culture &&
+            variant.segment === this.#workspaceActiveVariantId?.segment);
         if (itemVariantFit) {
             const variantId = UmbVariantId.CreateFromPartial(itemVariantFit);
-            return `${path}/${variantId.toString()}`;
+            return UMB_WORKSPACE_EDIT_VARIANT_PATH_PATTERN.generateAbsolute({
+                sectionName,
+                entityType: structureItem.entityType,
+                unique,
+                variantId: variantId.toString(),
+            });
         }
         // If no related variantID, then lets the redirect go to the main-variant:
-        return path;
+        return UMB_WORKSPACE_EDIT_PATH_PATTERN.generateAbsolute({
+            sectionName,
+            entityType: structureItem.entityType,
+            unique,
+        });
     }
     async #requestStructure() {
         const isNew = this.#workspaceContext?.getIsNew();

package/dist-cms/packages/core/modal/conditions/in-modal/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_IN_MODAL_CONDITION_ALIAS = "Umb.Condition.InModal";

package/dist-cms/packages/core/modal/conditions/in-modal/constants.js

@@ -0,0 +1 @@
+export const UMB_IN_MODAL_CONDITION_ALIAS = 'Umb.Condition.InModal';

package/dist-cms/packages/core/modal/conditions/in-modal/in-modal.condition-config.d.ts

@@ -0,0 +1,15 @@
+import type { UMB_IN_MODAL_CONDITION_ALIAS } from './constants.js';
+import type { UmbConditionConfigBase } from '../../../../../libs/extension-api/index.js';
+export interface UmbInModalConditionConfig extends UmbConditionConfigBase<typeof UMB_IN_MODAL_CONDITION_ALIAS> {
+    /**
+     * The expected modal state to match.
+     * - `true`: Condition is permitted when inside a modal (default)
+     * - `false`: Condition is permitted when NOT inside a modal
+     */
+    match?: boolean;
+}
+declare global {
+    interface UmbExtensionConditionConfigMap {
+        UmbInModalConditionConfig: UmbInModalConditionConfig;
+    }
+}

package/dist-cms/packages/core/modal/conditions/in-modal/in-modal.condition-config.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/modal/conditions/in-modal/in-modal.condition.d.ts

@@ -0,0 +1,8 @@
+import type { UmbInModalConditionConfig } from './in-modal.condition-config.js';
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '../../../../../libs/extension-api/index.js';
+import { UmbConditionBase } from '../../../extension-registry/index.js';
+export declare class UmbInModalCondition extends UmbConditionBase<UmbInModalConditionConfig> implements UmbExtensionCondition {
+    constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<UmbInModalConditionConfig>);
+}
+export { UmbInModalCondition as api };

package/dist-cms/packages/core/modal/conditions/in-modal/in-modal.condition.js

@@ -0,0 +1,19 @@
+import { UMB_MODAL_CONTEXT } from '../../context/modal.context-token.js';
+import { UmbConditionBase } from '../../../extension-registry/index.js';
+export class UmbInModalCondition extends UmbConditionBase {
+    constructor(host, args) {
+        super(host, args);
+        // Default match value is true (checking if we are in a modal)
+        const matchValue = this.config.match ?? true;
+        // Default state: we assume we are NOT in a modal.
+        // So if match is false (looking for "not in modal"), we start as permitted.
+        // If match is true (looking for "in modal"), we start as not permitted.
+        this.permitted = !matchValue;
+        this.consumeContext(UMB_MODAL_CONTEXT, () => {
+            // Modal context found, so we ARE in a modal.
+            // Permitted if match is true, not permitted if match is false.
+            this.permitted = matchValue;
+        });
+    }
+}
+export { UmbInModalCondition as api };

package/dist-cms/packages/core/modal/conditions/in-modal/in-modal.condition.manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestCondition } from '../../../../../libs/extension-api/index.js';
+export declare const manifest: ManifestCondition;

package/dist-cms/packages/core/modal/conditions/in-modal/in-modal.condition.manifest.js

@@ -0,0 +1,8 @@
+import { UMB_IN_MODAL_CONDITION_ALIAS } from './constants.js';
+import { UmbInModalCondition } from './in-modal.condition.js';
+export const manifest = {
+    type: 'condition',
+    name: 'In Modal Condition',
+    alias: UMB_IN_MODAL_CONDITION_ALIAS,
+    api: UmbInModalCondition,
+};

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

@@ -0,0 +1,2 @@
+export * from './in-modal/constants.js';
+export type * from './types.js';

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

@@ -0,0 +1 @@
+export * from './in-modal/constants.js';

package/dist-cms/packages/core/modal/conditions/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: import("../../../../libs/extension-api/index.js").ManifestCondition[];

package/dist-cms/packages/core/modal/conditions/manifests.js

@@ -0,0 +1,2 @@
+import { manifest as inModalManifest } from './in-modal/in-modal.condition.manifest.js';
+export const manifests = [inModalManifest];

package/dist-cms/packages/core/modal/conditions/types.d.ts

@@ -0,0 +1 @@
+export type * from './in-modal/in-modal.condition-config.js';

package/dist-cms/packages/core/modal/conditions/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
 export type { UmbModalContext, UmbModalRejectReason, UmbModalContextClassArgs } from './modal.context.js';
 export { UMB_MODAL_CONTEXT } from './modal.context-token.js';
-export * from './modal-manager.context.js';
+export { UMB_MODAL_MANAGER_CONTEXT } from './modal-manager.context-token.js';
+export { UmbModalManagerContext } from './modal-manager.context.js';

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

@@ -1,2 +1,3 @@
 export { UMB_MODAL_CONTEXT } from './modal.context-token.js';
-export * from './modal-manager.context.js';
+export { UMB_MODAL_MANAGER_CONTEXT } from './modal-manager.context-token.js';
+export { UmbModalManagerContext } from './modal-manager.context.js';

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

@@ -0,0 +1,3 @@
+import type { UmbModalManagerContext } from './modal-manager.context.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export declare const UMB_MODAL_MANAGER_CONTEXT: UmbContextToken<UmbModalManagerContext, UmbModalManagerContext>;

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

@@ -0,0 +1,2 @@
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export const UMB_MODAL_MANAGER_CONTEXT = new UmbContextToken('UmbModalManagerContext');

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

@@ -1,7 +1,6 @@
 import type { UmbModalToken } from '../token/modal-token.js';
 import { UmbModalContext } from './modal.context.js';
 import type { UmbModalContextClassArgs } from './modal.context.js';
-import { UmbContextToken } from '../../../../libs/context-api/index.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 export declare class UmbModalManagerContext extends UmbContextBase {
@@ -34,4 +33,4 @@ export declare class UmbModalManagerContext extends UmbContextBase {
     remove(key: string): void;
     destroy(): void;
 }
-export declare const UMB_MODAL_MANAGER_CONTEXT: UmbContextToken<UmbModalManagerContext, UmbModalManagerContext>;
+export { UMB_MODAL_MANAGER_CONTEXT } from './modal-manager.context-token.js';

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

@@ -1,6 +1,6 @@
 import { UmbModalContext } from './modal.context.js';
+import { UMB_MODAL_MANAGER_CONTEXT } from './modal-manager.context-token.js';
 import { UmbBasicState, appendToFrozenArray } from '../../../../libs/observable-api/index.js';
-import { UmbContextToken } from '../../../../libs/context-api/index.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 export class UmbModalManagerContext extends UmbContextBase {
     // TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.
@@ -66,4 +66,4 @@ export class UmbModalManagerContext extends UmbContextBase {
         window.removeEventListener('navigationsuccess', this.#onNavigationSuccess);
     }
 }
-export const UMB_MODAL_MANAGER_CONTEXT = new UmbContextToken('UmbModalManagerContext');
+export { UMB_MODAL_MANAGER_CONTEXT } from './modal-manager.context-token.js';

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

@@ -4,7 +4,8 @@ import { umbDeepMerge } from '../../utils/index.js';
 import { UmbId } from '../../id/index.js';
 import { UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
 import { UmbViewController } from '../../view/index.js';
-import { UMB_ROUTE_CONTEXT } from '../../router/index.js';
+// Import directly from token file to avoid circular dependency with router package
+import { UMB_ROUTE_CONTEXT } from '../../router/route/route.context-token.js';
 // TODO: consider splitting this into two separate handlers
 export class UmbModalContext extends UmbControllerBase {
     //

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

@@ -1,5 +1,6 @@
 import './component/modal.element.js';
 export * from './common/index.js';
+export * from './conditions/index.js';
 export * from './controller/index.js';
 export * from './component/modal-base.element.js';
 export * from './component/modal.element.js';

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

@@ -1,5 +1,6 @@
 import './component/modal.element.js';
 export * from './common/index.js';
+export * from './conditions/index.js';
 export * from './controller/index.js';
 export * from './component/modal-base.element.js';
 export * from './component/modal.element.js';

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

@@ -1,2 +1,3 @@
 import { manifests as commonManifests } from './common/manifests.js';
-export const manifests = [...commonManifests];
+import { manifests as conditionManifests } from './conditions/manifests.js';
+export const manifests = [...commonManifests, ...conditionManifests];

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

@@ -27,3 +27,13 @@ export interface UmbUniqueItemModel {
     name: string;
     icon?: string;
 }
+export interface UmbThumbnailModel {
+    src: string;
+    alt?: string;
+}
+export interface UmbWithThumbnailModel {
+    thumbnail: UmbThumbnailModel | null;
+}
+export interface UmbWithOptionalThumbnailModel {
+    thumbnail?: UmbThumbnailModel | null;
+}

package/dist-cms/packages/core/package.json

@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@types/diff": "^7.0.2",
-        "diff": "^7.0.0",
+        "diff": "^8.0.3",
         "uuid": "^13.0.0",
         "@hey-api/openapi-ts": "^0.85.0"
     },

package/dist-cms/packages/core/picker/search/picker-search-field.element.js

@@ -46,7 +46,6 @@ let UmbPickerSearchFieldElement = class UmbPickerSearchFieldElement extends UmbL
 						`
             : nothing}
 			</uui-input>
-			<div id="divider"></div>
 		`;
     }
     static { this.styles = [
@@ -54,6 +53,7 @@ let UmbPickerSearchFieldElement = class UmbPickerSearchFieldElement extends UmbL
         css `
 			uui-input {
 				width: 100%;
+				margin-bottom: var(--uui-size-4);
 			}
 
 			uui-input [slot='prepend'] {
@@ -61,17 +61,8 @@ let UmbPickerSearchFieldElement = class UmbPickerSearchFieldElement extends UmbL
 				align-items: center;
 			}
 
-			#divider {
-				width: 100%;
-				height: 1px;
-				background-color: var(--uui-color-divider);
-				margin-top: var(--uui-size-space-5);
-				margin-bottom: var(--uui-size-space-3);
-			}
-
 			#searching-indicator {
 				margin-left: 7px;
-				margin-top: 4px;
 			}
 		`,
     ]; }

package/dist-cms/packages/core/picker/search/picker-search-result.element.d.ts

@@ -10,7 +10,8 @@ export declare class UmbPickerSearchResultElement extends UmbLitElement {
     private _isSearchable;
     pickableFilter: PickableFilterMethodType;
     constructor();
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1> | undefined;
+    static readonly styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist-cms/packages/core/picker/search/picker-search-result.element.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_PICKER_CONTEXT } from '../picker.context.token.js';
 import { UmbDefaultPickerSearchResultItemElement } from './result-item/default/default-picker-search-result-item.element.js';
 import { UmbDefaultPickerSearchResultItemContext } from './result-item/default/default-picker-search-result-item.context.js';
-import { customElement, html, nothing, property, repeat, state } from '../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, repeat, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 let UmbPickerSearchResultElement = class UmbPickerSearchResultElement extends UmbLitElement {
     #pickerContext;
@@ -31,12 +31,19 @@ let UmbPickerSearchResultElement = class UmbPickerSearchResultElement extends Um
         if (this._query?.query && this._searching === false && this._items.length === 0) {
             return this.#renderEmptyResult();
         }
+        if (this._items.length === 0) {
+            return;
+        }
         return html `
-			${repeat(this._items, (item) => item.unique, (item) => this.#renderResultItem(item))}
+			<uui-box id="result-container">
+				${repeat(this._items, (item) => item.unique, (item) => this.#renderResultItem(item))}
+			</uui-box>
 		`;
     }
     #renderEmptyResult() {
-        return html `<small>No result for <strong>"${this._query?.query}"</strong>.</small>`;
+        return html `<uui-box>
+			<small>No result for <strong>"${this._query?.query}"</strong>.</small>
+		</uui-box>`;
     }
     #renderResultItem(item) {
         return html `
@@ -57,6 +64,22 @@ let UmbPickerSearchResultElement = class UmbPickerSearchResultElement extends Um
         new UmbDefaultPickerSearchResultItemContext(element);
         return element;
     }
+    static { this.styles = [
+        css `
+			:host {
+				display: block;
+			}
+
+			umb-extension-with-api-slot {
+				display: block;
+				margin-bottom: var(--uui-size-3);
+
+				&:last-of-type {
+					margin-bottom: 0;
+				}
+			}
+		`,
+    ]; }
 };
 __decorate([
     state()

package/dist-cms/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.d.ts

@@ -3,6 +3,7 @@ import { nothing } from '../../../../../../external/lit/index.js';
 import type { UmbSearchResultItemModel } from '../../../../search/index.js';
 export declare class UmbDefaultPickerSearchResultItemElement extends UmbPickerSearchResultItemElementBase<UmbSearchResultItemModel> {
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
 }
 export { UmbDefaultPickerSearchResultItemElement as element };
 declare global {

package/dist-cms/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbPickerSearchResultItemElementBase } from '../picker-search-result-item-element-base.js';
 import { getItemFallbackIcon, getItemFallbackName } from '../../../../entity-item/index.js';
-import { customElement, html, nothing } from '../../../../../../external/lit/index.js';
+import { css, customElement, html, nothing } from '../../../../../../external/lit/index.js';
 let UmbDefaultPickerSearchResultItemElement = class UmbDefaultPickerSearchResultItemElement extends UmbPickerSearchResultItemElementBase {
     render() {
         const item = this.item;
@@ -26,6 +26,14 @@ let UmbDefaultPickerSearchResultItemElement = class UmbDefaultPickerSearchResult
 			</umb-ref-item>
 		`;
     }
+    static { this.styles = [
+        css `
+			umb-ref-item {
+				padding-top: 0;
+				padding-bottom: 0;
+			}
+		`,
+    ]; }
 };
 UmbDefaultPickerSearchResultItemElement = __decorate([
     customElement('umb-default-picker-search-result-item')

package/dist-cms/packages/core/picker-input/picker-input.context.d.ts

@@ -12,6 +12,7 @@ export declare class UmbPickerInputContext<PickedItemType extends UmbItemModel =
     readonly selectedItems: import("rxjs").Observable<PickedItemType[]>;
     readonly statuses: import("rxjs").Observable<import("../repository/index.js").UmbRepositoryItemsStatus[]>;
     readonly interactionMemory: UmbInteractionMemoryManager;
+    readonly modalRoute: import("rxjs").Observable<string | undefined>;
     /**
      * Define a maximum amount of selected items in this input, for this input to be valid.
      * @returns {number} The maximum number of items required.
@@ -38,6 +39,30 @@ export declare class UmbPickerInputContext<PickedItemType extends UmbItemModel =
     getSelectedItems(): PickedItemType[];
     getSelectedItemByUnique(unique: string): PickedItemType | undefined;
     setSelection(selection: Array<string | null>): void;
+    /**
+     * Sets the modal alias/token to use for the picker modal.
+     * @param {string | UmbModalToken} modalAlias The modal alias or token.
+     * @memberof UmbPickerInputContext
+     */
+    setModalAlias(modalAlias: string | UmbModalToken<UmbPickerModalData<PickerItemType>, PickerModalValueType>): void;
+    /**
+     * Gets the modal alias/token used for the picker modal.
+     * @returns {string | UmbModalToken<UmbPickerModalData<PickerItemType>, PickerModalValueType>} The modal alias or token.
+     * @memberof UmbPickerInputContext
+     */
+    getModalAlias(): string | UmbModalToken<UmbPickerModalData<PickerItemType>, PickerModalValueType> | undefined;
+    /**
+     * Sets modal data that will be used as base configuration for both direct openPicker() calls and modal route setup.
+     * @param {Partial<PickerModalConfigType>} modalData The modal data to store.
+     * @memberof UmbPickerInputContext
+     */
+    setModalData(modalData?: Partial<PickerModalConfigType>): void;
+    /**
+     * Gets the stored modal data.
+     * @returns {Partial<PickerModalConfigType> | undefined} The stored modal data.
+     * @memberof UmbPickerInputContext
+     */
+    getModalData(): Partial<PickerModalConfigType> | undefined;
     openPicker(pickerData?: Partial<PickerModalConfigType>): Promise<void>;
     protected _requestItemName(unique: string): Promise<string>;
     requestRemoveItem(unique: string): Promise<void>;

package/dist-cms/packages/core/picker-input/picker-input.context.js

@@ -4,8 +4,12 @@ import { UmbContextBase } from '../../../libs/class-api/index.js';
 import { UmbInteractionMemoryManager } from '../interaction-memory/index.js';
 import { UmbRepositoryItemsManager } from '../repository/index.js';
 import { umbConfirmModal, umbOpenModal, } from '../modal/index.js';
+import { UmbModalRouteRegistrationController } from '../router/index.js';
+import { UmbStringState } from '../../../libs/observable-api/index.js';
 export class UmbPickerInputContext extends UmbContextBase {
     #itemManager;
+    #modalRoute;
+    #modalData;
     /**
      * Define a maximum amount of selected items in this input, for this input to be valid.
      * @returns {number} The maximum number of items required.
@@ -36,10 +40,12 @@ export class UmbPickerInputContext extends UmbContextBase {
     constructor(host, repositoryAlias, modalAlias) {
         super(host, UMB_PICKER_INPUT_CONTEXT);
         this.interactionMemory = new UmbInteractionMemoryManager(this);
+        this.#modalRoute = new UmbStringState(undefined);
+        this.modalRoute = this.#modalRoute.asObservable();
         this._max = Infinity;
         this._min = 0;
         if (modalAlias) {
-            this.modalAlias = modalAlias;
+            this.setModalAlias(modalAlias);
         }
         this.#itemManager = new UmbRepositoryItemsManager(this, repositoryAlias);
         this.selection = this.#itemManager.uniques;
@@ -59,24 +65,49 @@ export class UmbPickerInputContext extends UmbContextBase {
         // Note: Currently we do not support picking root item. So we filter out null values:
         this.#itemManager.setUniques(selection.filter((value) => value !== null));
     }
+    /**
+     * Sets the modal alias/token to use for the picker modal.
+     * @param {string | UmbModalToken} modalAlias The modal alias or token.
+     * @memberof UmbPickerInputContext
+     */
+    setModalAlias(modalAlias) {
+        this.modalAlias = modalAlias;
+        this.#createPickerModalRoute();
+    }
+    /**
+     * Gets the modal alias/token used for the picker modal.
+     * @returns {string | UmbModalToken<UmbPickerModalData<PickerItemType>, PickerModalValueType>} The modal alias or token.
+     * @memberof UmbPickerInputContext
+     */
+    getModalAlias() {
+        return this.modalAlias;
+    }
+    /**
+     * Sets modal data that will be used as base configuration for both direct openPicker() calls and modal route setup.
+     * @param {Partial<PickerModalConfigType>} modalData The modal data to store.
+     * @memberof UmbPickerInputContext
+     */
+    setModalData(modalData) {
+        this.#modalData = modalData;
+    }
+    /**
+     * Gets the stored modal data.
+     * @returns {Partial<PickerModalConfigType> | undefined} The stored modal data.
+     * @memberof UmbPickerInputContext
+     */
+    getModalData() {
+        return this.#modalData;
+    }
     async openPicker(pickerData) {
         await this.#itemManager.init;
         if (!this.modalAlias) {
             throw new Error('No modal alias defined for the picker input context.');
         }
         const modalValue = await umbOpenModal(this, this.modalAlias, {
-            data: {
-                multiple: this._max === 1 ? false : true,
-                ...pickerData,
-            },
-            value: {
-                selection: this.getSelection(),
-            },
+            data: this.#getPickerModalDataArgs(pickerData),
+            value: this.#getPickerModalValueArgs(),
         }).catch(() => undefined);
-        if (!modalValue)
-            return;
-        this.setSelection(modalValue.selection);
-        this.getHostElement().dispatchEvent(new UmbChangeEvent());
+        this.#applyModalValue(modalValue);
     }
     async _requestItemName(unique) {
         return this.getSelectedItemByUnique(unique)?.name ?? '#general_notFound';
@@ -96,4 +127,44 @@ export class UmbPickerInputContext extends UmbContextBase {
         this.setSelection(newSelection);
         this.getHostElement().dispatchEvent(new UmbChangeEvent());
     }
+    #pickerModalRouteRegistration;
+    #createPickerModalRoute() {
+        if (!this.modalAlias) {
+            this.#pickerModalRouteRegistration?.destroy();
+            return;
+        }
+        this.#pickerModalRouteRegistration = new UmbModalRouteRegistrationController(this, this.modalAlias)
+            .addUniquePaths(['picker'])
+            .onSetup(() => {
+            return {
+                data: this.#getPickerModalDataArgs(),
+                value: this.#getPickerModalValueArgs(),
+            };
+        })
+            .onSubmit((value) => {
+            this.#applyModalValue(value);
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            const path = routeBuilder({});
+            this.#modalRoute.setValue(path);
+        });
+    }
+    #getPickerModalDataArgs(modalData) {
+        return {
+            multiple: this._max === 1 ? false : true,
+            ...this.#modalData,
+            ...modalData,
+        };
+    }
+    #getPickerModalValueArgs() {
+        return {
+            selection: this.getSelection(),
+        };
+    }
+    #applyModalValue(value) {
+        if (!value)
+            return;
+        this.setSelection(value.selection);
+        this.getHostElement().dispatchEvent(new UmbChangeEvent());
+    }
 }

package/dist-cms/packages/core/property/components/property/index.d.ts

@@ -1,2 +1,3 @@
 export * from './property.context.js';
+export * from './property.context-token.js';
 export * from './property.element.js';

package/dist-cms/packages/core/property/components/property/index.js

@@ -1,2 +1,3 @@
 export * from './property.context.js';
+export * from './property.context-token.js';
 export * from './property.element.js';

package/dist-cms/packages/core/property/components/property/property.context-token.d.ts

@@ -0,0 +1,4 @@
+import type { UmbPropertyContext } from './property.context.js';
+import { UmbContextToken } from '../../../../../libs/context-api/index.js';
+export declare const UMB_PROPERTY_CONTEXT: UmbContextToken<UmbPropertyContext<any>, UmbPropertyContext<any>>;
+export declare const UMB_PROPERTY_CONTEXT_FOR_CULTURE_VARIANT: UmbContextToken<UmbPropertyContext<any>, UmbPropertyContext<any>>;

package/dist-cms/packages/core/property/components/property/property.context-token.js

@@ -0,0 +1,3 @@
+import { UmbContextToken } from '../../../../../libs/context-api/index.js';
+export const UMB_PROPERTY_CONTEXT = new UmbContextToken('UmbPropertyContext');
+export const UMB_PROPERTY_CONTEXT_FOR_CULTURE_VARIANT = new UmbContextToken('UmbPropertyContext', undefined, (instance) => instance.getVariantId()?.isCultureInvariant() === false);

package/dist-cms/packages/core/property/components/property/property.context.d.ts

@@ -1,6 +1,5 @@
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 import { UmbContextBase } from '../../../../../libs/class-api/index.js';
-import { UmbContextToken } from '../../../../../libs/context-api/index.js';
 import type { UmbVariantId } from '../../../variant/index.js';
 import type { ManifestPropertyEditorUi, UmbPropertyEditorConfigProperty, UmbPropertyEditorUiElement } from '../../../property-editor/index.js';
 import { UmbPropertyEditorConfigCollection } from '../../../property-editor/index.js';
@@ -174,4 +173,3 @@ export declare class UmbPropertyContext<ValueType = any> extends UmbContextBase
     clearValue(): void;
     destroy(): void;
 }
-export declare const UMB_PROPERTY_CONTEXT: UmbContextToken<UmbPropertyContext<any>, UmbPropertyContext<any>>;