@umbraco-cms/backoffice 14.0.0--preview004-168c444e → 14.0.0--preview004-ec083258

package/dist-cms/assets/lang/en-us.js

@@ -1646,8 +1646,8 @@ export default {
         groupsHelp: 'Add groups to assign access and permissions',
         inviteAnotherUser: 'Invite another user',
         inviteUserHelp: 'Invite new users to give them access to Umbraco. An invite email will be sent to the\n      user with information on how to log in to Umbraco. Invites last for 72 hours.\n    ',
-        language: 'Language',
-        languageHelp: 'Set the language you will see in menus and dialogs',
+        language: 'UI Culture',
+        languageHelp: 'Set the culture you will see in menus and dialogs',
         lastLockoutDate: 'Last lockout date',
         lastLogin: 'Last login',
         lastPasswordChangeDate: 'Password last changed',

package/dist-cms/assets/lang/en-us.ts

@@ -1782,8 +1782,8 @@ export default {
 		inviteAnotherUser: 'Invite another user',
 		inviteUserHelp:
 			'Invite new users to give them access to Umbraco. An invite email will be sent to the\n      user with information on how to log in to Umbraco. Invites last for 72 hours.\n    ',
-		language: 'Language',
-		languageHelp: 'Set the language you will see in menus and dialogs',
+		language: 'UI Culture',
+		languageHelp: 'Set the culture you will see in menus and dialogs',
 		lastLockoutDate: 'Last lockout date',
 		lastLogin: 'Last login',
 		lastPasswordChangeDate: 'Password last changed',

package/dist-cms/custom-elements.json

@@ -2754,6 +2754,28 @@
         }
       ]
     },
+    {
+      "name": "umb-ui-culture-input",
+      "path": "./../src/packages/core/localization/components/ui-culture-input/ui-culture-input.element.ts",
+      "attributes": [
+        {
+          "name": "value",
+          "type": "FormDataEntryValue | FormData"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "type": "FormDataEntryValue | FormData"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
     {
       "name": "umb-localize-date",
       "path": "./../src/packages/core/localization/localize-date.element.ts",

package/dist-cms/mocks/data/user/user.data.js

@@ -7,7 +7,7 @@ export const data = [
         mediaStartNodeIds: [],
         name: 'Umbraco User',
         email: 'noreply@umbraco.com',
-        languageIsoCode: 'en-US',
+        languageIsoCode: 'en-us',
         state: UserStateModel.ACTIVE,
         lastLoginDate: '9/10/2022',
         lastLockoutDate: '11/23/2021',
@@ -24,7 +24,7 @@ export const data = [
         mediaStartNodeIds: ['f2f81a40-c989-4b6b-84e2-057cecd3adc1'],
         name: 'Amelie Walker',
         email: 'awalker1@domain.com',
-        languageIsoCode: 'Japanese',
+        languageIsoCode: 'da-dk',
         state: UserStateModel.INACTIVE,
         lastLoginDate: '2023-10-12T18:30:32.879Z',
         lastLockoutDate: null,
@@ -41,7 +41,7 @@ export const data = [
         mediaStartNodeIds: [],
         name: 'Oliver Kim',
         email: 'okim1@domain.com',
-        languageIsoCode: 'Russian',
+        languageIsoCode: 'da-dk',
         state: UserStateModel.ACTIVE,
         lastLoginDate: '2023-10-12T18:30:32.879Z',
         lastLockoutDate: null,
@@ -58,7 +58,7 @@ export const data = [
         mediaStartNodeIds: [],
         name: 'Eliana Nieves',
         email: 'enieves1@domain.com',
-        languageIsoCode: 'Spanish',
+        languageIsoCode: 'en-us',
         state: UserStateModel.INVITED,
         lastLoginDate: '2023-10-12T18:30:32.879Z',
         lastLockoutDate: null,
@@ -75,7 +75,7 @@ export const data = [
         mediaStartNodeIds: [],
         name: 'Jasmine Patel',
         email: 'jpatel1@domain.com',
-        languageIsoCode: 'Hindi',
+        languageIsoCode: 'en-us',
         state: UserStateModel.LOCKED_OUT,
         lastLoginDate: '2023-10-12T18:30:32.879Z',
         lastLockoutDate: '2023-10-12T18:30:32.879Z',

package/dist-cms/packages/core/localization/components/index.d.ts

@@ -0,0 +1,2 @@
+import './ui-culture-input/ui-culture-input.element.js';
+export { UmbUiCultureInputElement } from './ui-culture-input/ui-culture-input.element.js';

package/dist-cms/packages/core/localization/components/index.js

@@ -0,0 +1,2 @@
+import './ui-culture-input/ui-culture-input.element.js';
+export { UmbUiCultureInputElement } from './ui-culture-input/ui-culture-input.element.js';

package/dist-cms/packages/core/localization/components/ui-culture-input/ui-culture-input.element.d.ts

@@ -0,0 +1,19 @@
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+declare const UmbUiCultureInputElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
+export declare class UmbUiCultureInputElement extends UmbUiCultureInputElement_base {
+    #private;
+    private _options;
+    private _selectElement;
+    get value(): FormDataEntryValue | FormData;
+    set value(value: FormDataEntryValue | FormData);
+    constructor();
+    protected getFormElement(): HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbUiCultureInputElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-ui-culture-input': UmbUiCultureInputElement;
+    }
+}

package/dist-cms/packages/core/localization/components/ui-culture-input/ui-culture-input.element.js

@@ -0,0 +1,79 @@
+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 { UmbChangeEvent } from '../../../event/index.js';
+import { css, html, customElement, query, state, property } from '../../../../../external/lit/index.js';
+import { FormControlMixin } from '../../../../../external/uui/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { umbExtensionsRegistry } from '../../../extension-registry/index.js';
+export let UmbUiCultureInputElement = class UmbUiCultureInputElement extends FormControlMixin(UmbLitElement) {
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (typeof value === 'string') {
+            const oldValue = this._value;
+            this._value = value.toLowerCase();
+            this.requestUpdate('value', oldValue);
+        }
+    }
+    constructor() {
+        super();
+        this._options = [];
+        this.#observeTranslations();
+    }
+    #observeTranslations() {
+        this.observe(umbExtensionsRegistry.extensionsOfType('localization'), (localizationManifests) => {
+            this.#mapToOptions(localizationManifests);
+        }, 'umbObserveLocalizationManifests');
+    }
+    #mapToOptions(manifests) {
+        this._options = manifests
+            .filter((isoCode) => isoCode !== undefined)
+            .map((manifest) => ({
+            name: manifest.name,
+            value: manifest.meta.culture.toLowerCase(),
+        }));
+    }
+    getFormElement() {
+        return this._selectElement;
+    }
+    #onChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        if (typeof target?.value === 'string') {
+            this.value = target.value;
+            this.dispatchEvent(new UmbChangeEvent());
+        }
+    }
+    render() {
+        return html ` <uui-combobox value="${this._value}" @change=${this.#onChange}>
+			<uui-combobox-list>
+				${this._options.map((option) => html `<uui-combobox-list-option value="${option.value}">${option.name}</uui-combobox-list-option>`)}
+			</uui-combobox-list>
+		</uui-combobox>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: block;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbUiCultureInputElement.prototype, "_options", void 0);
+__decorate([
+    query('uui-combobox')
+], UmbUiCultureInputElement.prototype, "_selectElement", void 0);
+__decorate([
+    property({ type: String })
+], UmbUiCultureInputElement.prototype, "value", null);
+UmbUiCultureInputElement = __decorate([
+    customElement('umb-ui-culture-input')
+], UmbUiCultureInputElement);
+export default UmbUiCultureInputElement;

package/dist-cms/packages/core/localization/index.d.ts

@@ -3,3 +3,4 @@ import './localize-date.element.js';
 import './localize-number.element.js';
 import './localize-relative-time.element.js';
 export * from './registry/localization.registry.js';
+export { UmbUiCultureInputElement } from './components/index.js';

package/dist-cms/packages/core/localization/index.js

@@ -3,3 +3,4 @@ import './localize-date.element.js';
 import './localize-number.element.js';
 import './localize-relative-time.element.js';
 export * from './registry/localization.registry.js';
+export { UmbUiCultureInputElement } from './components/index.js';

package/dist-cms/packages/user/user/workspace/components/user-workspace-profile-settings/user-workspace-profile-settings.element.d.ts

@@ -2,8 +2,6 @@ import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 export declare class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement {
     #private;
     private _user?;
-    private _currentUser?;
-    private languages;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

package/dist-cms/packages/user/user/workspace/components/user-workspace-profile-settings/user-workspace-profile-settings.element.js

@@ -8,64 +8,21 @@ import { UMB_USER_WORKSPACE_CONTEXT } from '../../user-workspace.context.js';
 import { html, customElement, state, ifDefined, css } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { UmbTextStyles } from '../../../../../../shared/style/index.js';
-import { UMB_CURRENT_USER_CONTEXT } from '../../../../current-user/index.js';
-import { firstValueFrom } from '../../../../../../external/rxjs/index.js';
-import { umbExtensionsRegistry } from '../../../../../core/extension-registry/index.js';
 export let UmbUserWorkspaceProfileSettingsElement = class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement {
-    #currentUserContext;
     #userWorkspaceContext;
     constructor() {
         super();
-        this.languages = [];
-        this.consumeContext(UMB_CURRENT_USER_CONTEXT, (instance) => {
-            this.#currentUserContext = instance;
-            this.#observeCurrentUser();
-        });
         this.consumeContext(UMB_USER_WORKSPACE_CONTEXT, (instance) => {
             this.#userWorkspaceContext = instance;
             this.observe(this.#userWorkspaceContext.data, (user) => (this._user = user), 'umbUserObserver');
         });
     }
     #onLanguageChange(event) {
-        const target = event.composedPath()[0];
+        const target = event.target;
         if (typeof target?.value === 'string') {
             this.#userWorkspaceContext?.updateProperty('languageIsoCode', target.value);
         }
     }
-    #observeCurrentUser() {
-        if (!this.#currentUserContext)
-            return;
-        this.observe(this.#currentUserContext.currentUser, async (currentUser) => {
-            this._currentUser = currentUser;
-            if (!currentUser) {
-                return;
-            }
-            // Find all translations and make a unique list of iso codes
-            const translations = await firstValueFrom(umbExtensionsRegistry.extensionsOfType('localization'));
-            this.languages = translations
-                .filter((isoCode) => isoCode !== undefined)
-                .map((translation) => ({
-                value: translation.meta.culture.toLowerCase(),
-                name: translation.name,
-                selected: false,
-            }));
-            const currentUserLanguageCode = currentUser.languageIsoCode?.toLowerCase();
-            // Set the current user's language as selected
-            const currentUserLanguage = this.languages.find((language) => language.value === currentUserLanguageCode);
-            if (currentUserLanguage) {
-                currentUserLanguage.selected = true;
-            }
-            else {
-                // If users language code did not fit any of the options. We will create an option that fits, named unknown.
-                // In this way the user can keep their choice though a given language was not present at this time.
-                this.languages.push({
-                    value: currentUserLanguageCode ?? 'en-us',
-                    name: currentUserLanguageCode ? `${currentUserLanguageCode} (unknown)` : 'Unknown',
-                    selected: true,
-                });
-            }
-        }, 'umbUserObserver');
-    }
     render() {
         return html `<uui-box>
 			<div slot="headline"><umb-localize key="user_profile">Profile</umb-localize></div>
@@ -89,13 +46,12 @@ export let UmbUserWorkspaceProfileSettingsElement = class UmbUserWorkspaceProfil
 			<umb-workspace-property-layout
 				label="${this.localize.term('user_language')}"
 				description=${this.localize.term('user_languageHelp')}>
-				<uui-select
+				<umb-ui-culture-input
 					slot="editor"
+					value=${ifDefined(this._user?.languageIsoCode)}
+					@change="${this.#onLanguageChange}"
 					name="language"
-					label="${this.localize.term('user_language')}"
-					.options=${this.languages}
-					@change="${this.#onLanguageChange}">
-				</uui-select>
+					label="${this.localize.term('user_language')}"></umb-ui-culture-input>
 			</umb-workspace-property-layout>
 		`;
     }
@@ -111,12 +67,6 @@ export let UmbUserWorkspaceProfileSettingsElement = class UmbUserWorkspaceProfil
 __decorate([
     state()
 ], UmbUserWorkspaceProfileSettingsElement.prototype, "_user", void 0);
-__decorate([
-    state()
-], UmbUserWorkspaceProfileSettingsElement.prototype, "_currentUser", void 0);
-__decorate([
-    state()
-], UmbUserWorkspaceProfileSettingsElement.prototype, "languages", void 0);
 UmbUserWorkspaceProfileSettingsElement = __decorate([
     customElement('umb-user-workspace-profile-settings')
 ], UmbUserWorkspaceProfileSettingsElement);