From 54deb30c6f353de58e1fced5d69ae2b22160bd22 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 4 Apr 2024 11:19:33 +0100
Subject: [PATCH] Package Builder: Language Picker

---
 .../input-language/input-language.element.ts  | 12 ++++++----
 .../workspace-package-builder.element.ts      | 22 +++++++++++--------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts b/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts
index fea8574cc8..b8e73ad562 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts
@@ -109,7 +109,11 @@ export class UmbInputLanguageElement extends FormControlMixin(UmbLitElement) {
 	render() {
 		return html`
 			<uui-ref-list> ${this._items.map((item) => this.#renderItem(item))} </uui-ref-list>
-			<uui-button id="add-button" look="placeholder" @click=${this.#openPicker} label="open">Add</uui-button>
+			<uui-button
+				id="add-button"
+				look="placeholder"
+				@click=${this.#openPicker}
+				label=${this.localize.term('general_choose')}></uui-button>
 		`;
 	}
 
@@ -119,9 +123,9 @@ export class UmbInputLanguageElement extends FormControlMixin(UmbLitElement) {
 			<!-- TODO: add language ref element -->
 			<uui-ref-node name=${ifDefined(item.name === null ? undefined : item.name)} detail=${ifDefined(item.unique)}>
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.unique!)} label="Remove ${item.name}"
-						>Remove</uui-button
-					>
+					<uui-button
+						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
+						label=${this.localize.term('general_remove')}></uui-button>
 				</uui-action-bar>
 			</uui-ref-node>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
index ecc795a780..17fb2378f3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
@@ -178,8 +178,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 				${this.#renderMediaSection()}
 				${this.#renderDocumentTypeSection()}
 				${this.#renderMediaTypeSection()}
-
-			<umb-property-layout label="Languages" description=""> ${this.#renderLanguageSection()} </umb-property-layout>
+				${this.#renderLanguageSection()}
 
 			<umb-property-layout label="Dictionary" description=""> ${this.#renderDictionarySection()} </umb-property-layout>
 
@@ -297,13 +296,18 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 	}
 
 	#renderLanguageSection() {
-		return html`<div slot="editor">
-			<umb-input-language
-				.value="${this._package.languages?.join(',') ?? ''}"
-				@change="${(e: CustomEvent) => {
-					this._package.languages = (e.target as UmbInputLanguageElement).selection;
-				}}"></umb-input-language>
-		</div>`;
+		if (!this._package) return nothing;
+		return html`
+			<umb-property-layout label="Languages">
+				<div slot="editor">
+					<umb-input-language
+						.value="${this._package.languages?.join(',') ?? ''}"
+						@change="${(e: CustomEvent) => {
+							this._package!.languages = (e.target as UmbInputLanguageElement).selection;
+						}}"></umb-input-language>
+				</div>
+			</umb-property-layout>
+		`;
 	}
 
 	#renderDictionarySection() {