V16: Localization refinements (#19258)

Author: leekelleher

src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts renamed to src/Umbraco.Web.UI.Client/src/assets/lang/cs.ts

@@ -3,8 +3,8 @@
  * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
  *
  * Language Alias: pt
- * Language Int Name: Portuguese (BR)
- * Language Local Name: português (BR)
+ * Language Int Name: Portuguese (Brazil)
+ * Language Local Name: Português ()
  * Language LCID:
  * Language Culture: pt-BR
  */

src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts renamed to src/Umbraco.Web.UI.Client/src/assets/lang/cy.ts

@@ -0,0 +1,12 @@
+/**
+ * Creator Name: The Umbraco community
+ * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
+ *
+ * Language Alias: pt
+ * Language Int Name: Portuguese
+ * Language Local Name: Português
+ * Language LCID:
+ * Language Culture: pt-PT
+ */
+import type { UmbLocalizationDictionary } from '@umbraco-cms/backoffice/localization-api';
+export default {} as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts renamed to src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -1,89 +1,121 @@
-import type { ManifestLocalization } from '../../extensions/localization.extension.js';
+import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { css, html, customElement, query, state, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_DEFAULT_LOCALIZATION_CULTURE } from '@umbraco-cms/backoffice/localization-api';
+import type { PropertyValues } from '@umbraco-cms/backoffice/external/lit';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
 interface UmbCultureInputOption {
 	name: string;
 	value: string;
 }
 
 @customElement('umb-ui-culture-input')
-export class UmbUiCultureInputElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbUiCultureInputElement extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(
+	UmbLitElement,
+) {
+	#invalidCulture?: string;
+	#invalidBaseCulture?: string;
+
 	@state()
 	private _options: Array<UmbCultureInputOption> = [];
 
-	@query('uui-combobox')
-	private _selectElement!: HTMLInputElement;
-
 	@property({ type: String })
-	override get value() {
-		return super.value;
-	}
-	override set value(value: FormDataEntryValue | FormData) {
-		if (typeof value === 'string') {
+	override set value(value: string | undefined) {
+		if (value && typeof value === 'string') {
 			const oldValue = super.value;
 			super.value = value.toLowerCase();
 			this.requestUpdate('value', oldValue);
 		}
 	}
+	override get value(): string | undefined {
+		return super.value;
+	}
 
 	constructor() {
 		super();
-		this.#observeTranslations();
-	}
 
-	#observeTranslations() {
 		this.observe(
 			umbExtensionsRegistry.byType('localization'),
-			(localizationManifests) => {
-				this.#mapToOptions(localizationManifests);
+			(manifests) => {
+				const options = manifests
+					.filter((manifest) => !!manifest.meta.culture)
+					.map((manifest) => {
+						const culture = manifest.meta.culture.toLowerCase();
+						return {
+							name: this.localize.term(`uiCulture_${culture}`),
+							value: culture,
+						};
+					});
+
+				const distinct = [...new Map(options.map((item) => [item.value, item])).values()];
+
+				this._options = distinct.sort((a, b) => a.name.localeCompare(b.name));
 			},
 			'umbObserveLocalizationManifests',
 		);
-	}
 
-	#mapToOptions(manifests: Array<ManifestLocalization>) {
-		this._options = manifests
-			.filter((isoCode) => isoCode !== undefined)
-			.map((manifest) => ({
-				name: manifest.name,
-				value: manifest.meta.culture.toLowerCase(),
-			}));
+		this.addValidator(
+			'customError',
+			() => this.localize.term('user_languageNotFound', this.#invalidCulture, this.value),
+			() => !!this.#invalidCulture && !this.#invalidBaseCulture,
+		);
+
+		this.addValidator(
+			'customError',
+			() => this.localize.term('user_languageNotFoundFallback', this.#invalidCulture, this.#invalidBaseCulture),
+			() => !!this.#invalidCulture && !!this.#invalidBaseCulture,
+		);
 	}
 
-	protected override getFormElement() {
-		return this._selectElement;
+	protected override firstUpdated(_changedProperties: PropertyValues): void {
+		super.firstUpdated(_changedProperties);
+
+		if (this.value) {
+			// Check if the culture can be found.
+			const found = this._options.find((option) => option.value === this.value);
+			if (!found) {
+				this.#invalidCulture = this.value;
+
+				// if not found, check for the base culture
+				const locale = new Intl.Locale(this.value);
+				if (locale.language) {
+					const foundBase = this._options.find((option) => option.value === locale.language);
+					if (foundBase) {
+						this.value = locale.language;
+					} else {
+						// if the base culture is not found, set the value to "en"
+						this.#invalidBaseCulture = locale.language;
+						this.value = UMB_DEFAULT_LOCALIZATION_CULTURE;
+					}
+				} else {
+					// if the base culture is not found, set the value to "en"
+					this.value = UMB_DEFAULT_LOCALIZATION_CULTURE;
+				}
+			}
+		}
+
+		this.addFormControlElement(this.shadowRoot!.querySelector('uui-select')!);
+		this.checkValidity();
 	}
 
 	#onCustomValidationChange(event: UUISelectEvent) {
+		this.#invalidCulture = undefined;
+		this.#invalidBaseCulture = undefined;
 		this.value = event.target.value.toString();
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	override render() {
 		return html`
 			<uui-select
-				style="margin-top: var(--uui-size-space-1)"
-				@change=${this.#onCustomValidationChange}
-				.options=${this._options.map((e) => ({
-					name: e.name,
-					value: e.value,
-					selected: e.value == this.value,
-				}))}></uui-select>
+				.options=${this._options.map((e) => ({ ...e, selected: e.value == this.value }))}
+				@change=${this.#onCustomValidationChange}>
+			</uui-select>
 		`;
 	}
-
-	static override styles = [
-		css`
-			:host {
-				display: block;
-			}
-		`,
-	];
 }
 
 export default UmbUiCultureInputElement;