From 792ac7be4433e7e7fa6da407f710a17421cfdf14 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 23 May 2024 21:29:52 +0200
Subject: [PATCH] chore: add localization

---
 .../src/assets/lang/en.ts                     |  2 +
 .../property-type-settings-modal.element.ts   | 55 ++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
index 767c9349b5..e4174162ba 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
@@ -1682,6 +1682,7 @@ export default {
 		elementDoesNotSupport: 'This is not applicable for an Element Type',
 		propertyHasChanges: 'You have made changes to this property. Are you sure you want to discard them?',
 		displaySettingsHeadline: 'Appearance',
+		displaySettingsLabelOnLeft: 'Label to the left',
 		displaySettingsLabelOnTop: 'Label above (full-width)',
 		confirmDeleteTabMessage: 'Are you sure you want to delete the tab <strong>%0%</strong>?',
 		confirmDeleteGroupMessage: 'Are you sure you want to delete the group <strong>%0%</strong>?',
@@ -2034,6 +2035,7 @@ export default {
 	},
 	validation: {
 		validation: 'Validation',
+		validateNothing: 'No validation',
 		validateAsEmail: 'Validate as an email address',
 		validateAsNumber: 'Validate as a number',
 		validateAsUrl: 'Validate as a URL',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.element.ts
index 463ef9497e..511323278f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.element.ts
@@ -23,25 +23,25 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 	// TODO: Or should they come from a extension point? [NL]
 	@state() private _customValidationOptions: Array<Option> = [
 		{
-			name: 'No validation',
+			name: this.localize.term('validation_validateNothing'),
 			value: '!NOVALIDATION!',
 			selected: true,
 		},
 		{
-			name: 'Validate as an email address',
+			name: this.localize.term('validation_validateAsEmail'),
 			value: '[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+',
 		},
 		{
-			name: 'Validate as a number',
+			name: this.localize.term('validation_validateAsNumber'),
 			value: '^[0-9]*$',
 		},
 		{
-			name: 'Validate as an URL',
+			name: this.localize.term('validation_validateAsUrl'),
 			value: 'https?://[a-zA-Z0-9-.]+\\.[a-zA-Z]{2,}',
 		},
 		{
-			name: '...or enter a custom validation',
-			value: '',
+			name: this.localize.term('validation_enterCustomValidation'),
+			value: '.+',
 		},
 	];
 
@@ -232,10 +232,10 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 									<uui-input
 										id="name-input"
 										name="name"
-										label="property name (TODO: Localize)"
+										label=${this.localize.term('placeholders_entername')}
 										@input=${this.#onNameChange}
 										.value=${this.value.name}
-										placeholder="Enter a name..."
+										placeholder=${this.localize.term('placeholders_entername')}
 										${umbFocus()}>
 										<!-- TODO: validation for bad characters -->
 									</uui-input>
@@ -244,7 +244,8 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 										name="alias"
 										@input=${this.#onAliasChange}
 										.value=${this.value.alias}
-										placeholder="Enter alias..."
+										label=${this.localize.term('placeholders_enterAlias')}
+										placeholder=${this.localize.term('placeholders_enterAlias')}
 										?disabled=${this._aliasLocked}>
 										<!-- TODO: validation for bad characters -->
 										<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
@@ -255,7 +256,8 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 										id="description-input"
 										name="description"
 										@input=${this.#onDescriptionChange}
-										placeholder="Enter description..."
+										label=${this.localize.term('placeholders_enterDescription')}
+										placeholder=${this.localize.term('placeholders_enterDescription')}
 										.value=${this.value.description}></uui-textarea>
 								</div>
 								<umb-data-type-flow-input
@@ -263,15 +265,19 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 									@change=${this.#onDataTypeIdChange}></umb-data-type-flow-input>
 								<hr />
 								<div class="container">
-									<b>Validation</b>
+									<b><umb-localize key="validation_validation">Validation</umb-localize></b>
 									${this.#renderMandatory()}
-									<p style="margin-bottom: 0">Custom validation</p>
+									<p style="margin-bottom: 0">
+										<umb-localize key="validation_customValidation">Custom validation</umb-localize>
+									</p>
 									${this.#renderCustomValidation()}
 								</div>
 								<hr />
 								${this.#renderVariationControls()}
 								<div class="container">
-									<b style="margin-bottom: var(--uui-size-space-3)">Appearance</b>
+									<b style="margin-bottom: var(--uui-size-space-3)">
+										<umb-localize key="contentTypeEditor_displaySettingsHeadline">Appearance</umb-localize>
+									</b>
 									<div id="appearances">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
 								</div>
 							</uui-box>
@@ -299,7 +305,9 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 				<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
 				<rect x="106" width="94" height="60" rx="5" fill="currentColor" fill-opacity="0.4" />
 			</svg>
-			<label class="appearance-label"> Label on the left </label>
+			<label class="appearance-label">
+				<umb-localize key="contentTypeEditor_displaySettingsLabelOnLeft">Label to the left</umb-localize>
+			</label>
 		</button>`;
 	}
 
@@ -314,14 +322,18 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 					<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
 					<rect y="42" width="140" height="36" rx="5" fill="currentColor" fill-opacity="0.4" />
 				</svg>
-				<label class="appearance-label"> Label on top </label>
+				<label class="appearance-label">
+					<umb-localize key="contentTypeEditor_displaySettingsLabelOnTop">Label above (full-width)</umb-localize>
+				</label>
 			</button>
 		`;
 	}
 
 	#renderMandatory() {
 		return html`<div style="display: flex; justify-content: space-between">
-				<label for="mandatory">Field is mandatory</label>
+				<label for="mandatory">
+					<umb-localize key="validation_fieldIsMandatory">Field is mandatory</umb-localize>
+				</label>
 				<uui-toggle
 					@change=${this.#onMandatoryChange}
 					id="mandatory"
@@ -335,7 +347,8 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 						@change=${this.#onMandatoryMessageChange}
 						style="margin-top: var(--uui-size-space-1)"
 						id="mandatory-message"
-						placeholder="Enter a custom validation error message (optional)"></uui-input>`
+						placeholder=${this.localize.term('validation_mandatoryMessage')}
+						label=${this.localize.term('validation_mandatoryMessage')}></uui-input>`
 				: ''}`;
 	}
 
@@ -351,10 +364,14 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 							name="pattern"
 							style="margin-bottom: var(--uui-size-space-1); margin-top: var(--uui-size-space-5);"
 							@change=${this.#onValidationRegExChange}
+							placeholder=${this.localize.term('validation_validationRegExp')}
+							label=${this.localize.term('validation_validationRegExp')}
 							.value=${this.value.validation?.regEx ?? ''}></uui-input>
 						<uui-textarea
 							name="pattern-message"
 							@change=${this.#onValidationMessageChange}
+							placeholder=${this.localize.term('validation_validationRegExpMessage')}
+							label=${this.localize.term('validation_validationRegExpMessage')}
 							.value=${this.value.validation?.regExMessage ?? ''}></uui-textarea>
 					`
 				: nothing} `;
@@ -363,7 +380,7 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 	#renderVariationControls() {
 		return this._contentTypeVariesByCulture || this._contentTypeVariesBySegment
 			? html` <div class="container">
-						<b>Variation</b>
+						<b><umb-localize key="contentTypeEditor_variantsHeading">Allow variations</umb-localize></b>
 						${this._contentTypeVariesByCulture ? this.#renderVaryByCulture() : ''}
 					</div>
 					<hr />`
@@ -373,7 +390,7 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
 		return html`<uui-toggle
 			@change=${this.#onVaryByCultureChange}
 			.checked=${this.value.variesByCulture ?? false}
-			label="Vary by culture"></uui-toggle> `;
+			label=${this.localize.term('contentTypeEditor_cultureVariantLabel')}></uui-toggle> `;
 	}
 
 	static styles = [