@umbraco-cms/backoffice 14.0.0-178e68bb → 14.0.0-1ab621da

package/dist-cms/packages/core/localization/registry/{translation.registry.js → localization.registry.js}

@@ -1,18 +1,22 @@
-import { registerTranslation, translations, } from '../../../../libs/localization-api/index.js';
+import { registerLocalization, localizations, } from '../../../../libs/localization-api/index.js';
 import { hasDefaultExport, loadExtension } from '../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
-import { Subject, combineLatest, map, distinctUntilChanged, filter } from '../../../../external/rxjs/index.js';
-export class UmbTranslationRegistry {
+import { BehaviorSubject, Subject, combineLatest, map, distinctUntilChanged, filter, startWith, } from '../../../../external/rxjs/index.js';
+export class UmbLocalizationRegistry {
     /**
      * Get the current registered translations.
      */
-    get translations() {
-        return translations;
+    get localizations() {
+        return localizations;
+    }
+    get isDefaultLoaded() {
+        return this.#isDefaultLoaded.asObservable();
     }
     #currentLanguage = new Subject();
+    #isDefaultLoaded = new BehaviorSubject(false);
     constructor(extensionRegistry) {
-        const currentLanguage$ = this.#currentLanguage.pipe(map((x) => x.toLowerCase()), distinctUntilChanged());
-        const currentExtensions$ = extensionRegistry.extensionsOfType('translations').pipe(filter((x) => x.length > 0), distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((x) => curr.includes(x))));
+        const currentLanguage$ = this.#currentLanguage.pipe(startWith(document.documentElement.lang || 'en-us'), map((x) => x.toLowerCase()), distinctUntilChanged());
+        const currentExtensions$ = extensionRegistry.extensionsOfType('localization').pipe(filter((x) => x.length > 0), distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((x) => curr.includes(x))));
         combineLatest([currentLanguage$, currentExtensions$]).subscribe(async ([userCulture, extensions]) => {
             const locale = new Intl.Locale(userCulture);
             const translations = await Promise.all(extensions
@@ -21,8 +25,8 @@ export class UmbTranslationRegistry {
                 .map(async (extension) => {
                 const innerDictionary = {};
                 // If extension contains a dictionary, add it to the inner dictionary.
-                if (extension.meta.translations) {
-                    for (const [dictionaryName, dictionary] of Object.entries(extension.meta.translations)) {
+                if (extension.meta.localizations) {
+                    for (const [dictionaryName, dictionary] of Object.entries(extension.meta.localizations)) {
                         this.#addOrUpdateDictionary(innerDictionary, dictionaryName, dictionary);
                     }
                 }
@@ -41,7 +45,7 @@ export class UmbTranslationRegistry {
                 };
             }));
             if (translations.length) {
-                registerTranslation(...translations);
+                registerLocalization(...translations);
                 // Set the document language
                 const newLang = locale.baseName.toLowerCase();
                 if (document.documentElement.lang.toLowerCase() !== newLang) {
@@ -53,6 +57,10 @@ export class UmbTranslationRegistry {
                     document.documentElement.dir = newDir;
                 }
             }
+            if (!this.#isDefaultLoaded.value) {
+                this.#isDefaultLoaded.next(true);
+                this.#isDefaultLoaded.complete();
+            }
         });
     }
     /**
@@ -68,4 +76,4 @@ export class UmbTranslationRegistry {
         }
     }
 }
-export const umbTranslationRegistry = new UmbTranslationRegistry(umbExtensionsRegistry);
+export const umbLocalizationRegistry = new UmbLocalizationRegistry(umbExtensionsRegistry);

package/dist-cms/packages/core/macro/macro.service.d.ts

@@ -23,4 +23,4 @@ export declare class UmbMacroService {
     generateMvcSyntax(args: MacroSyntaxData): string;
     collectValueData(macro: any, macroParams: any, renderingEngine: any): MacroSyntaxData;
 }
-export declare const UMB_MACRO_SERVICE_CONTEXT_TOKEN: UmbContextToken<UmbMacroService>;
+export declare const UMB_MACRO_SERVICE_CONTEXT_TOKEN: UmbContextToken<UmbMacroService, UmbMacroService>;

package/dist-cms/packages/core/menu/menu-item/menu-item.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, ifDefined, customElement, property } from '../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../shared/style/index.js";
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export let UmbMenuItemElement = class UmbMenuItemElement extends UmbLitElement {
     render() {
@@ -14,7 +14,7 @@ export let UmbMenuItemElement = class UmbMenuItemElement extends UmbLitElement {
 			icon-name=${this.manifest.meta.icon}
 			entity-type=${ifDefined(this.manifest.meta.entityType)}></umb-menu-item-base>`;
     }
-    static { this.styles = [UUITextStyles]; }
+    static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     property({ type: Object, attribute: false })

package/dist-cms/packages/core/menu/menu-item-base/menu-item-base.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, state, ifDefined } from '../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../shared/style/index.js";
 import { UMB_SECTION_CONTEXT_TOKEN } from '../../section/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export let UmbMenuItemBaseElement = class UmbMenuItemBaseElement extends UmbLitElement {
@@ -50,7 +50,7 @@ export let UmbMenuItemBaseElement = class UmbMenuItemBaseElement extends UmbLitE
 			.label=${this.label}>
 		</umb-entity-actions-bundle>`;
     }
-    static { this.styles = [UUITextStyles]; }
+    static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     property({ type: String, attribute: 'entity-type' })

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

@@ -6,4 +6,4 @@ export declare class UmbMenuContext {
     readonly alias: import("rxjs").Observable<string | undefined>;
     setManifest(manifest: ManifestMenu | undefined): void;
 }
-export declare const UMB_MENU_CONTEXT_TOKEN: UmbContextToken<UmbMenuContext>;
+export declare const UMB_MENU_CONTEXT_TOKEN: UmbContextToken<UmbMenuContext, UmbMenuContext>;

package/dist-cms/packages/core/menu/menu.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 { UUITextStyles } from '../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../shared/style/index.js";
 import { html, customElement, property } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 import './menu-item/menu-item.element.js';
@@ -19,7 +19,7 @@ export let UmbMenuElement = class UmbMenuElement extends UmbLitElement {
 			.filter=${(items) => items.meta.menus.includes(this.manifest.alias)}
 			default-element="umb-menu-item"></umb-extension-slot>`;
     }
-    static { this.styles = [UUITextStyles]; }
+    static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     property({ attribute: false })

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

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, ifDefined, customElement, query } from '../../../../../external/lit/index.js';
 import { loadCodeEditor } from '../../../../templating/code-editor/index.js';
-import { UUITextStyles } from '../../../../../external/uui/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 import { UmbBooleanState } from '../../../../../libs/observable-api/index.js';
 export let UmbCodeEditorModalElement = class UmbCodeEditorModalElement extends UmbModalBaseElement {
@@ -68,7 +67,6 @@ export let UmbCodeEditorModalElement = class UmbCodeEditorModalElement extends U
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
         css `
 			#editor-box {
 				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));

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 { UUITextStyles } from '../../../../../external/uui/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() {
@@ -30,7 +30,7 @@ export let UmbConfirmModalElement = class UmbConfirmModalElement extends UmbLitE
 			</uui-dialog-layout>
 		`;
     }
-    static { this.styles = [UUITextStyles]; }
+    static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     property({ attribute: false })

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 { UUITextStyles } from '../../../../../external/uui/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';
@@ -192,7 +192,7 @@ export let UmbEmbeddedMediaModalElement = class UmbEmbeddedMediaModalElement ext
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			h3 {
 				margin-left: var(--uui-size-space-5);

package/dist-cms/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.d.ts

@@ -0,0 +1,19 @@
+import { UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalResult, UmbModalContext } from '../../index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+export declare class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
+    #private;
+    modalContext?: UmbModalContext<UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalResult>;
+    data?: UmbEntityUserPermissionSettingsModalData;
+    private _userPermissionManifests;
+    private _handleConfirm;
+    private _handleCancel;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbEntityUserPermissionSettingsModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-entity-user-permission-modal': UmbEntityUserPermissionSettingsModalElement;
+    }
+}

package/dist-cms/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.js

@@ -0,0 +1,97 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html, customElement, property, state, css } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { umbExtensionsRegistry } from '../../../extension-registry/index.js';
+export let UmbEntityUserPermissionSettingsModalElement = class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
+    _handleConfirm() {
+        this.modalContext?.submit();
+    }
+    _handleCancel() {
+        this.modalContext?.reject();
+    }
+    constructor() {
+        super();
+        this._userPermissionManifests = [];
+        this.observe(umbExtensionsRegistry.extensionsOfType('userPermission'), (userPermissionManifests) => (this._userPermissionManifests = userPermissionManifests));
+    }
+    render() {
+        return html `
+			<umb-body-layout headline="Hello">
+				<uui-box>
+					Render user permissions for ${this.data?.entityType} ${this.data?.unique}
+					${this._userPermissionManifests.map((permission) => this.#renderPermission(permission))}
+
+					<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>
+					<uui-button
+						slot="actions"
+						id="confirm"
+						color="positive"
+						look="primary"
+						label="Confirm"
+						@click=${this._handleConfirm}></uui-button>
+				</uui-box>
+			</umb-body-layout>
+		`;
+    }
+    #onChangeUserPermission(event, userPermissionManifest) {
+        console.log(userPermissionManifest);
+        console.log(event.target.checked);
+    }
+    #isAllowed(userPermissionManifest) {
+        return true;
+        //return this._userGroup?.permissions?.includes(userPermissionManifest.alias);
+    }
+    #renderPermission(userPermissionManifest) {
+        return html `<div
+			style="display: flex; align-items:center; border-bottom: 1px solid var(--uui-color-divider); padding: 9px 0 12px 0;">
+			<uui-toggle
+				label=${userPermissionManifest.meta.label}
+				?checked=${this.#isAllowed(userPermissionManifest)}
+				@change=${(event) => this.#onChangeUserPermission(event, userPermissionManifest)}>
+				<div class="permission-meta">
+					<div class="permission-name">${userPermissionManifest.meta.label}</div>
+					<small>${userPermissionManifest.meta.description}</small>
+				</div>
+			</uui-toggle>
+		</div>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			.permission-toggle {
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid var(--uui-color-divider);
+				padding: var(--uui-size-space-3) 0 var(--uui-size-space-4) 0;
+			}
+
+			.permission-meta {
+				margin-left: var(--uui-size-space-4);
+				line-height: 1.2em;
+			}
+
+			.permission-name {
+				font-weight: bold;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ attribute: false })
+], UmbEntityUserPermissionSettingsModalElement.prototype, "modalContext", void 0);
+__decorate([
+    property({ type: Object })
+], UmbEntityUserPermissionSettingsModalElement.prototype, "data", void 0);
+__decorate([
+    state()
+], UmbEntityUserPermissionSettingsModalElement.prototype, "_userPermissionManifests", void 0);
+UmbEntityUserPermissionSettingsModalElement = __decorate([
+    customElement('umb-entity-user-permission-settings-modal')
+], UmbEntityUserPermissionSettingsModalElement);
+export default UmbEntityUserPermissionSettingsModalElement;

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 { UUITextStyles } from '../../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../../shared/style/index.js";
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { createExtensionClass } from '../../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../../extension-registry/index.js';
@@ -141,7 +141,7 @@ export let UmbFolderModalElement = class UmbFolderModalElement extends UmbLitEle
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			#name {
 				width: 100%;

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 { UUITextStyles } from '../../../../../external/uui/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
@@ -115,7 +115,7 @@ export let UmbIconPickerModalElement = class UmbIconPickerModalElement extends U
         })}`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				position: relative;

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

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, nothing, customElement, query, state } from '../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../external/uui/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 import { buildUdi, getKeyFromUdi } from '../../../../../shared/utils/index.js';
 export let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModalBaseElement {
@@ -143,7 +142,6 @@ export let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends U
 				selectable></umb-tree>`;
     }
     static { this.styles = [
-        UUITextStyles,
         css `
 			hr {
 				border: none;

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

@@ -59,5 +59,11 @@ const modals = [
         name: 'Tree Picker Modal',
         loader: () => import('./tree-picker/tree-picker-modal.element.js'),
     },
+    {
+        type: 'modal',
+        alias: 'Umb.Modal.EntityUserPermissionSettings',
+        name: 'Entity User Permission Settings Modal',
+        loader: () => import('./entity-user-permission-settings/entity-user-permission-settings-modal.element.js'),
+    },
 ];
 export const manifests = [...modals];

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

@@ -5,6 +5,7 @@ export declare class UmbPropertySettingsModalElement extends UmbModalBaseElement
     #private;
     private _customValidationOptions;
     private _aliasLocked;
+    protected _ownerDocumentType?: UmbPropertySettingsModalResult;
     protected _returnData: UmbPropertySettingsModalResult;
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;

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

@@ -4,10 +4,11 @@ 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 { UUITextStyles, } from '../../../../../external/uui/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { css, html, nothing, customElement, state } from '../../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 import { generateAlias } from '../../../../../shared/utils/index.js';
+import { UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN } from '../../../../documents/document-types/index.js';
 // TODO: Could base take a token to get its types?.
 // TODO: Missing a workspace context... unless this should not be a workspace any way.
 export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalElement extends UmbModalBaseElement {
@@ -42,7 +43,14 @@ export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalEleme
     }
     connectedCallback() {
         super.connectedCallback();
-        this._returnData = JSON.parse(JSON.stringify(this.data));
+        // TODO: This is actually not good enough, we need to be able to get to the DOCUMENT_WORKSPACE_CONTEXT, so we can have a look at the draft/runtime version of the document. Otherwise 'Vary by culture' is first updated when saved.
+        this.consumeContext(UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN, (instance) => {
+            this.observe(instance.byId(this.data?.documentTypeId), (documentType) => {
+                this._ownerDocumentType = documentType;
+                this.requestUpdate('_ownerDocumentType');
+            }, '_observeDocumentType');
+        });
+        this._returnData = JSON.parse(JSON.stringify(this.data?.propertyData ?? {}));
         this._returnData.validation ??= {};
         const regEx = this._returnData.validation.regEx ?? null;
         const newlySelected = this._customValidationOptions.find((option) => {
@@ -93,7 +101,7 @@ export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalEleme
             this._returnData.alias = alias;
         }
         else {
-            this._returnData.alias = this.data?.alias;
+            this._returnData.alias = this.data?.propertyData?.alias;
         }
         this.requestUpdate('_returnData');
     }
@@ -134,7 +142,6 @@ export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalEleme
         this._customValidationOptions.forEach((option) => {
             option.selected = option.value === regEx;
         });
-        console.log(this._customValidationOptions);
         this._returnData.validation.regEx = regEx ?? null;
         this.requestUpdate('_returnData');
         this.requestUpdate('_customValidationOptions');
@@ -156,6 +163,10 @@ export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalEleme
         this._returnData.validation.regExMessage = event.target.value.toString();
         this.requestUpdate('_returnData');
     }
+    #onVaryByCultureChange(event) {
+        this._returnData.variesByCulture = event.target.checked;
+        this.requestUpdate('_returnData');
+    }
     // TODO: This would conceptually be a Property Editor Workspace, should be changed at one point in the future.
     // For now this is hacky made available by giving the element an fixed alias.
     // This would allow for workspace views and workspace actions.
@@ -205,6 +216,7 @@ export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalEleme
 									${this.#renderCustomValidation()}
 								</div>
 								<hr />
+								${this.#renderVariationControls()}
 								<div class="container">
 									<b style="margin-bottom: var(--uui-size-space-3)">Appearance</b>
 									<div id="appearances">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
@@ -253,13 +265,13 @@ export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalEleme
 				<uui-toggle
 					@change=${this.#onMandatoryChange}
 					id="mandatory"
-					value=${this._returnData.validation?.mandatory}
+					.checked=${this._returnData.validation?.mandatory ?? false}
 					slot="editor"></uui-toggle>
 			</div>
 			${this._returnData.validation?.mandatory
             ? html `<uui-input
 						name="mandatory-message"
-						value=${this._returnData.validation?.mandatoryMessage}
+						value=${this._returnData.validation?.mandatoryMessage ?? ''}
 						@change=${this.#onMandatoryMessageChange}
 						style="margin-top: var(--uui-size-space-1)"
 						id="mandatory-message"
@@ -286,8 +298,25 @@ 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 />`
+            : '';
+    }
+    #renderVaryByCulture() {
+        return html `<uui-toggle
+				@change=${this.#onVaryByCultureChange}
+				.checked=${this._returnData.variesByCulture ?? false}
+				label="Vary by culture"></uui-toggle>
+			`;
+    }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				color: var(--uui-color-text);
@@ -424,6 +453,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertySettingsModalElement.prototype, "_aliasLocked", void 0);
+__decorate([
+    state()
+], UmbPropertySettingsModalElement.prototype, "_ownerDocumentType", void 0);
 __decorate([
     state()
 ], UmbPropertySettingsModalElement.prototype, "_returnData", void 0);

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 { UUITextStyles } from '../../../../../external/uui/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';
@@ -51,7 +51,7 @@ export let UmbSectionPickerModalElement = class UmbSectionPickerModalElement ext
 			</umb-body-layout>
 		`;
     }
-    static { this.styles = [UUITextStyles, css ``]; }
+    static { this.styles = [UmbTextStyles, css ``]; }
 };
 __decorate([
     state()

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

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, ifDefined, customElement, query, state } from '../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../external/uui/index.js';
 import { TemplateResource } from '../../../../../external/backend-api/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 import { tryExecuteAndNotify } from '../../../../../shared/resources/index.js';
@@ -92,7 +91,6 @@ export let UmbTemplateModalElement = class UmbTemplateModalElement extends UmbMo
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
         css `
 			uui-box {
 				position: relative;

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

@@ -4,9 +4,10 @@ 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 { css, html, customElement, state } from '../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../external/uui/index.js';
+import { html, customElement, state } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
+import { UmbSelectedEvent } from '../../../../../shared/umb-events/index.js';
 export let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
@@ -22,6 +23,7 @@ export let UmbTreePickerModalElement = class UmbTreePickerModalElement extends U
         e.stopPropagation();
         const element = e.target;
         this._selection = element.selection;
+        this.dispatchEvent(new UmbSelectedEvent());
     }
     #submit() {
         this.modalContext?.submit({ selection: this._selection });
@@ -48,7 +50,7 @@ export let UmbTreePickerModalElement = class UmbTreePickerModalElement extends U
 			</umb-body-layout>
 		`;
     }
-    static { this.styles = [UUITextStyles, css ``]; }
+    static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     state()

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

@@ -48,5 +48,5 @@ export declare class UmbModalContextClass<ModalData extends object = object, Mod
     onSubmit(): Promise<ModalResult>;
     destroy(): void;
 }
-export declare const UMB_MODAL_CONTEXT_TOKEN: UmbContextToken<UmbModalContext<object, any>>;
+export declare const UMB_MODAL_CONTEXT_TOKEN: UmbContextToken<UmbModalContext<object, any>, UmbModalContext<object, any>>;
 export {};

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

@@ -34,4 +34,4 @@ export declare class UmbModalManagerContext {
      */
     close(key: string): void;
 }
-export declare const UMB_MODAL_MANAGER_CONTEXT_TOKEN: UmbContextToken<UmbModalManagerContext>;
+export declare const UMB_MODAL_MANAGER_CONTEXT_TOKEN: UmbContextToken<UmbModalManagerContext, UmbModalManagerContext>;

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

@@ -28,8 +28,8 @@ export declare class UmbModalRouteRegistration<UmbModalTokenData extends object
     get modalContext(): UmbModalContext<UmbModalTokenData, UmbModalTokenResult> | undefined;
     observeRouteBuilder(callback: (urlBuilder: UmbModalRouteBuilder) => void): this;
     _internal_setRouteBuilder(urlBuilder: UmbModalRouteBuilder): void;
-    onSetup(callback: (routingInfo: Params) => UmbModalTokenData | false): this;
+    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): UmbModalContext<UmbModalTokenData, UmbModalTokenResult> | null | undefined;
+    routeSetup(router: IRouterSlot, modalContext: UmbModalManagerContext, params: Params): Promise<UmbModalContext<UmbModalTokenData, UmbModalTokenResult> | null | undefined>;
 }

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

@@ -81,11 +81,11 @@ export class UmbModalRouteRegistration {
         this.#onRejectCallback?.();
         this.#modalContext = undefined;
     };
-    routeSetup(router, modalContext, params) {
+    async routeSetup(router, modalContext, params) {
         // If already open, don't do anything:
         if (this.active)
             return;
-        const modalData = this.#onSetupCallback ? this.#onSetupCallback(params) : undefined;
+        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);

package/dist-cms/packages/core/modal/token/create-document-modal.token.d.ts

@@ -0,0 +1,8 @@
+import { UmbModalToken } from '../index.js';
+export interface UmbCreateDocumentModalData {
+    id: string | null;
+}
+export interface UmbCreateDocumentModalResult {
+    documentTypeId: string;
+}
+export declare const UMB_CREATE_DOCUMENT_MODAL: UmbModalToken<UmbCreateDocumentModalData, UmbCreateDocumentModalResult>;

package/dist-cms/packages/core/modal/token/create-document-modal.token.js

@@ -0,0 +1,5 @@
+import { UmbModalToken } from '../index.js';
+export const UMB_CREATE_DOCUMENT_MODAL = new UmbModalToken('Umb.Modal.CreateDocument', {
+    type: 'sidebar',
+    size: 'small',
+});