Feature: Document Type reference localizations

src/assets/lang/en.ts

@@ -1562,6 +1562,7 @@ export default {
 		ascending: 'ascending',
 		descending: 'descending',
 		template: 'Template',
+		systemFields: 'System fields',
 	},
 	grid: {
 		media: 'Image',

src/packages/core/components/input-entity/input-entity.element.ts

@@ -148,7 +148,7 @@ export class UmbInputEntityElement extends UmbFormControlMixin<string | undefine
 				id="btn-add"
 				look="placeholder"
 				@click=${this.#openPicker}
-				label="${this.localize.term('general_choose')}"></uui-button>
+				label=${this.localize.term('general_choose')}></uui-button>
 		`;
 	}
 

src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts

@@ -129,19 +129,22 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 					${!this._references.length
-						? html`<uui-button
-								label=${this.localize.term('general_submit')}
-								look="primary"
-								color="positive"
-								@click=${this._submitModal}></uui-button>`
+						? html`
+								<uui-button
+									label=${this.localize.term('general_submit')}
+									look="primary"
+									color="positive"
+									@click=${this._submitModal}></uui-button>
+							`
 						: nothing}
 				</div>
 			</umb-body-layout>
 		`;
 	}
 
 	#renderHasReference() {
-		return html` <umb-localize key="contentTypeEditor_compositionInUse">
+		return html`
+			<umb-localize key="contentTypeEditor_compositionInUse">
 				This Content Type is used in a composition, and therefore cannot be composed itself.
 			</umb-localize>
 			<h4>
@@ -154,19 +157,22 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 				${repeat(
 					this._references,
 					(item) => item.unique,
-					(item) =>
-						html`<uui-ref-node-document-type
+					(item) => html`
+						<uui-ref-node-document-type
 							href=${'/section/settings/workspace/document-type/edit/' + item.unique}
-							name=${item.name}>
+							name=${this.localize.string(item.name)}>
 							<umb-icon slot="icon" name=${item.icon}></umb-icon>
-						</uui-ref-node-document-type>`,
+						</uui-ref-node-document-type>
+					`,
 				)}
-			</div>`;
+			</div>
+		`;
 	}
 
 	#renderAvailableCompositions() {
 		if (this._compatibleCompositions) {
-			return html`<umb-localize key="contentTypeEditor_compositionsDescription">
+			return html`
+				<umb-localize key="contentTypeEditor_compositionsDescription">
 					Inherit tabs and properties from an existing Document Type. New tabs will be<br />added to the current
 					Document Type or merged if a tab with an identical name exists.<br />
 				</umb-localize>
@@ -184,27 +190,31 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 								: nothing}
 							${this.#renderCompositionsItems(folder.compositions)}`,
 					)}
-				</div>`;
+				</div>
+			`;
 		} else {
-			return html`<umb-localize key="contentTypeEditor_noAvailableCompositions">
-				There are no Content Types available to use as a composition
-			</umb-localize>`;
+			return html`
+				<umb-localize key="contentTypeEditor_noAvailableCompositions">
+					There are no Content Types available to use as a composition
+				</umb-localize>
+			`;
 		}
 	}
 
 	#renderCompositionsItems(compositionsList: Array<UmbContentTypeCompositionCompatibleModel>) {
 		return repeat(
 			compositionsList,
 			(compositions) => compositions.unique,
-			(compositions) =>
-				html`<uui-menu-item
-					label=${compositions.name}
+			(compositions) => html`
+				<uui-menu-item
+					label=${this.localize.string(compositions.name)}
 					selectable
 					@selected=${() => this.#onSelectionAdd(compositions.unique)}
 					@deselected=${() => this.#onSelectionRemove(compositions.unique)}
 					?selected=${this._selection.find((unique) => unique === compositions.unique)}>
 					<umb-icon name=${compositions.icon} slot="icon"></umb-icon>
-				</uui-menu-item>`,
+				</uui-menu-item>
+			`,
 		);
 	}
 

src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts

@@ -416,14 +416,16 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 		return html`
 			<div id="actions">
 				${this._compositionRepositoryAlias
-					? html` <uui-button
-							look="outline"
-							label=${this.localize.term('contentTypeEditor_compositions')}
-							compact
-							@click=${this.#openCompositionModal}>
-							<uui-icon name="icon-merge"></uui-icon>
-							${this.localize.term('contentTypeEditor_compositions')}
-						</uui-button>`
+					? html`
+							<uui-button
+								look="outline"
+								label=${this.localize.term('contentTypeEditor_compositions')}
+								compact
+								@click=${this.#openCompositionModal}>
+								<uui-icon name="icon-merge"></uui-icon>
+								${this.localize.term('contentTypeEditor_compositions')}
+							</uui-button>
+						`
 					: ''}
 				<uui-button look="outline" label=${sortButtonText} compact @click=${this.#toggleSortMode}>
 					<uui-icon name="icon-navigation"></uui-icon>

src/packages/core/content/workspace/views/edit/content-editor-tab.element.ts

@@ -63,7 +63,7 @@ export class UmbContentWorkspaceViewEditTabElement extends UmbLitElement {
 				this._groups,
 				(group) => group.id,
 				(group) =>
-					html`<uui-box .headline=${group.name ?? ''}>
+					html`<uui-box .headline=${this.localize.string(group.name) ?? ''}>
 						<umb-content-workspace-view-edit-properties
 							class="properties"
 							.containerId=${group.id}></umb-content-workspace-view-edit-properties>

src/packages/core/content/workspace/views/edit/content-editor.element.ts

@@ -138,7 +138,7 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
 								(tab) => {
 									const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
 									return html`<uui-tab label=${tab.name ?? 'Unnamed'} .active=${path === this._activePath} href=${path}
-										>${tab.name}</uui-tab
+										>${this.localize.string(tab.name)}</uui-tab
 									>`;
 								},
 							)}

src/packages/core/modal/common/item-picker/item-picker-modal.element.ts

@@ -51,7 +51,7 @@ export class UmbItemPickerModalElement extends UmbModalBaseElement<UmbItemPicker
 		if (!this.data) return nothing;
 		const items = this._filtered;
 		return html`
-			<umb-body-layout headline=${this.data.headline}>
+			<umb-body-layout headline=${this.localize.string(this.data.headline)}>
 				<div id="main">
 					<uui-input
 						type="search"
@@ -72,7 +72,7 @@ export class UmbItemPickerModalElement extends UmbModalBaseElement<UmbItemPicker
 										(item) => item.value,
 										(item) => html`
 											<umb-ref-item
-												name=${item.label}
+												name=${this.localize.string(item.label)}
 												detail=${ifDefined(item.description)}
 												icon=${ifDefined(item.icon)}
 												@click=${() => this.#submit(item)}>

src/packages/data-type/workspace/views/info/data-type-workspace-view-info-reference.element.ts

@@ -87,7 +87,9 @@ export class UmbDataTypeWorkspaceViewInfoReferenceElement extends UmbLitElement
 					(item) => html`
 						<uui-table-row>
 							<uui-table-cell>
-								<uui-ref-node-document-type href=${this.#getEditPath(item)} name=${item.name ?? item.unique}>
+								<uui-ref-node-document-type
+									href=${this.#getEditPath(item)}
+									name=${this.localize.string(item.name ?? item.unique)}>
 									<umb-icon slot="icon" name=${item.icon ?? 'icon-document'}></umb-icon>
 								</uui-ref-node-document-type>
 							</uui-table-cell>

src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts

@@ -204,7 +204,7 @@ export class UmbInputDocumentTypeElement extends UmbFormControlMixin<string | un
 		if (!item.unique) return;
 		const href = `${this._editPath}edit/${item.unique}`;
 		return html`
-			<uui-ref-node-document-type name=${item.name} id=${item.unique}>
+			<uui-ref-node-document-type name=${this.localize.string(item.name)} id=${item.unique}>
 				${this.#renderIcon(item)}
 				<uui-action-bar slot="actions">
 					<uui-button href=${href} label=${this.localize.term('general_open')}></uui-button>

src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts

@@ -133,60 +133,65 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
 	}
 
 	#renderDocumentTypes() {
-		return html`<uui-box .headline=${this._headline}>
-			${when(
-				this._allowedDocumentTypes.length === 0,
-				() => html`
-					<umb-localize key="create_noDocumentTypes">
-						There are no allowed Document Types available for creating content here. You must enable these in
-						<strong>Document Types</strong> within the <strong>Settings</strong> section, by editing the
-						<strong>Allowed child node types</strong> under <strong>Permissions</strong>.<br />
-					</umb-localize>
-					<uui-button
-						id="edit-permissions"
-						look="secondary"
-						@click=${() => this._rejectModal()}
-						href=${`/section/settings/workspace/document-type/edit/${this.data?.documentType?.unique}/view/structure`}
-						label=${this.localize.term('create_noDocumentTypesEditPermissions')}></uui-button>
-				`,
-				() =>
-					repeat(
-						this._allowedDocumentTypes,
-						(documentType) => documentType.unique,
-						(documentType) =>
-							html` <uui-ref-node-document-type
-								data-id=${ifDefined(documentType.unique)}
-								.name=${documentType.name}
-								.alias=${documentType.description ?? ''}
-								select-only
-								selectable
-								@selected=${() => this.#onSelectDocumentType(documentType.unique)}>
-								<umb-icon slot="icon" name=${documentType.icon || 'icon-circle-dotted'}></umb-icon>
-							</uui-ref-node-document-type>`,
-					),
-			)}
-		</uui-box>`;
+		return html`
+			<uui-box .headline=${this._headline}>
+				${when(
+					this._allowedDocumentTypes.length === 0,
+					() => html`
+						<umb-localize key="create_noDocumentTypes">
+							There are no allowed Document Types available for creating content here. You must enable these in
+							<strong>Document Types</strong> within the <strong>Settings</strong> section, by editing the
+							<strong>Allowed child node types</strong> under <strong>Permissions</strong>.<br />
+						</umb-localize>
+						<uui-button
+							id="edit-permissions"
+							look="secondary"
+							href=${`/section/settings/workspace/document-type/edit/${this.data?.documentType?.unique}/view/structure`}
+							label=${this.localize.term('create_noDocumentTypesEditPermissions')}
+							@click=${() => this._rejectModal()}></uui-button>
+					`,
+					() =>
+						repeat(
+							this._allowedDocumentTypes,
+							(documentType) => documentType.unique,
+							(documentType) => html`
+								<uui-ref-node-document-type
+									data-id=${ifDefined(documentType.unique)}
+									.name=${this.localize.string(documentType.name)}
+									.alias=${this.localize.string(documentType.description ?? '')}
+									select-only
+									selectable
+									@selected=${() => this.#onSelectDocumentType(documentType.unique)}>
+									<umb-icon slot="icon" name=${documentType.icon || 'icon-circle-dotted'}></umb-icon>
+								</uui-ref-node-document-type>
+							`,
+						),
+				)}
+			</uui-box>
+		`;
 	}
 
 	#renderBlueprints() {
-		return html`<uui-box headline=${this.localize.term('blueprints_selectBlueprint')}>
-			<uui-menu-item
-				id="blank"
-				label=${this.localize.term('blueprints_blankBlueprint')}
-				@click=${() => this.#onNavigate(this.#documentTypeUnique)}>
-				<umb-icon slot="icon" name=${this.#documentTypeIcon}></umb-icon>
-			</uui-menu-item>
-			${repeat(
-				this._availableBlueprints,
-				(blueprint) => blueprint.unique,
-				(blueprint) =>
-					html`<uui-menu-item
-						label=${blueprint.name}
-						@click=${() => this.#onNavigate(this.#documentTypeUnique, blueprint.unique)}>
-						<umb-icon slot="icon" name="icon-blueprint"></umb-icon>
-					</uui-menu-item>`,
-			)}</uui-box
-		> `;
+		return html`
+			<uui-box headline=${this.localize.term('blueprints_selectBlueprint')}>
+				<uui-menu-item
+					id="blank"
+					label=${this.localize.term('blueprints_blankBlueprint')}
+					@click=${() => this.#onNavigate(this.#documentTypeUnique)}>
+					<umb-icon slot="icon" name=${this.#documentTypeIcon}></umb-icon>
+				</uui-menu-item>
+				${repeat(
+					this._availableBlueprints,
+					(blueprint) => blueprint.unique,
+					(blueprint) =>
+						html`<uui-menu-item
+							label=${blueprint.name}
+							@click=${() => this.#onNavigate(this.#documentTypeUnique, blueprint.unique)}>
+							<umb-icon slot="icon" name="icon-blueprint"></umb-icon>
+						</uui-menu-item>`,
+				)}
+			</uui-box>
+		`;
 	}
 
 	static override styles = [

src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts

@@ -252,7 +252,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 				<uui-ref-node-document-type
 					standalone
 					href=${editDocumentTypePath + 'edit/' + this._documentTypeUnique}
-					name=${ifDefined(this._documentTypeName)}>
+					name=${ifDefined(this.localize.string(this._documentTypeName ?? ''))}>
 					<umb-icon slot="icon" name=${ifDefined(this._documentTypeIcon)}></umb-icon>
 				</uui-ref-node-document-type>
 			</div>

src/packages/media/media-types/components/input-media-type/input-media-type.element.ts

@@ -174,7 +174,7 @@ export class UmbInputMediaTypeElement extends UmbFormControlMixin<string | undef
 		if (!item.unique) return;
 		const href = `${this._editPath}edit/${item.unique}`;
 		return html`
-			<uui-ref-node-document-type name=${item.name} id=${item.unique}>
+			<uui-ref-node-document-type name=${this.localize.string(item.name)} id=${item.unique}>
 				${this.#renderIcon(item)}
 				<uui-action-bar slot="actions">
 					<uui-button href=${href} label=${this.localize.term('general_open')}></uui-button>

src/packages/media/media/entity-actions/create/media-create-options-modal.element.ts

@@ -89,7 +89,8 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 	}
 
 	#renderNotAllowed() {
-		return html`<umb-localize key="create_noMediaTypes">
+		return html`
+			<umb-localize key="create_noMediaTypes">
 				There are no allowed Media Types available for creating media here. You must enable these in
 				<strong>Media Types</strong> within the <strong>Settings</strong> section, by editing the
 				<strong>Allowed child node types</strong> under <strong>Permissions</strong>. </umb-localize
@@ -99,23 +100,25 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 				look="secondary"
 				@click=${() => this._rejectModal()}
 				href=${`/section/settings/workspace/media-type/edit/${this.data?.mediaType?.unique}/view/structure`}
-				label=${this.localize.term('create_noMediaTypesEditPermissions')}></uui-button>`;
+				label=${this.localize.term('create_noMediaTypesEditPermissions')}></uui-button>
+		`;
 	}
 
 	#renderAllowedMediaTypes() {
 		return repeat(
 			this._allowedMediaTypes,
 			(mediaType) => mediaType.unique,
-			(mediaType) =>
-				html`<uui-ref-node-document-type
+			(mediaType) => html`
+				<uui-ref-node-document-type
 					data-id=${ifDefined(mediaType.unique)}
-					.name=${mediaType.name}
-					.alias=${mediaType.description ?? ''}
+					.name=${this.localize.string(mediaType.name)}
+					.alias=${this.localize.string(mediaType.description ?? '')}
 					select-only
 					selectable
 					@selected=${() => this.#onNavigate(mediaType)}>
 					${mediaType.icon ? html`<umb-icon slot="icon" name=${mediaType.icon}></umb-icon>` : nothing}
-				</uui-ref-node-document-type>`,
+				</uui-ref-node-document-type>
+			`,
 		);
 	}
 

src/packages/members/member-type/components/input-member-type/input-member-type.element.ts

@@ -137,7 +137,7 @@ export class UmbInputMemberTypeElement extends UmbFormControlMixin<string | unde
 	#renderItem(item: UmbUniqueItemModel) {
 		if (!item.unique) return;
 		return html`
-			<uui-ref-node-document-type name=${item.name}>
+			<uui-ref-node-document-type name=${this.localize.string(item.name)}>
 				${when(item.icon, () => html`<umb-icon slot="icon" name=${item.icon!}></umb-icon>`)}
 				<uui-action-bar slot="actions">
 					<uui-button