@umbraco-cms/backoffice 14.0.0--preview004-3ba57be2 → 14.0.0--preview004-ec083258

package/dist-cms/apps/backoffice/components/backoffice-header-sections.element.d.ts

@@ -1,18 +1,13 @@
 import { CSSResultGroup } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 export declare class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
-    private _open;
     private _sections;
-    private _extraSections;
     private _currentSectionAlias;
     private _backofficeContext?;
     constructor();
-    private _handleMore;
-    private _handleLabelClick;
     private _observeSections;
     private _observeCurrentSection;
     private _renderSections;
-    private _renderExtraSections;
     render(): import("lit-html").TemplateResult<1>;
     static styles: CSSResultGroup;
 }

package/dist-cms/apps/backoffice/components/backoffice-header-sections.element.js

@@ -5,14 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BACKOFFICE_CONTEXT_TOKEN } from '../backoffice.context.js';
-import { css, html, when, customElement, state, repeat } from '../../../external/lit/index.js';
+import { css, html, customElement, state, repeat } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 export let UmbBackofficeHeaderSectionsElement = class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
     constructor() {
         super();
-        this._open = false;
         this._sections = [];
-        this._extraSections = [];
         this._currentSectionAlias = '';
         this.consumeContext(UMB_BACKOFFICE_CONTEXT_TOKEN, (backofficeContext) => {
             this._backofficeContext = backofficeContext;
@@ -20,15 +18,6 @@ export let UmbBackofficeHeaderSectionsElement = class UmbBackofficeHeaderSection
             this._observeCurrentSection();
         });
     }
-    _handleMore(e) {
-        e.stopPropagation();
-        this._open = !this._open;
-    }
-    _handleLabelClick() {
-        const moreTab = this.shadowRoot?.getElementById('moreTab');
-        moreTab?.setAttribute('active', 'true');
-        this._open = false;
-    }
     _observeSections() {
         if (!this._backofficeContext)
             return;
@@ -54,67 +43,33 @@ export let UmbBackofficeHeaderSectionsElement = class UmbBackofficeHeaderSection
 							href="${`section/${section.manifest?.meta.pathname}`}"
 							label="${section.manifest?.meta.label ?? section.manifest?.name ?? ''}"></uui-tab>
 					`)}
-				${this._renderExtraSections()}
 			</uui-tab-group>
 		`;
     }
-    _renderExtraSections() {
-        return when(this._extraSections.length > 0, () => html `
-				<uui-tab id="moreTab">
-					<uui-popover .open=${this._open} placement="bottom-start" @close="${() => (this._open = false)}">
-						<uui-button slot="trigger" look="primary" label="More" @click="${this._handleMore}" compact>
-							<uui-symbol-more></uui-symbol-more>
-						</uui-button>
-
-						<div slot="popover" id="dropdown">
-							${this._extraSections.map((section) => html `
-									<uui-menu-item
-										?active="${this._currentSectionAlias === section.alias}"
-										label="${section.meta.label || section.name}"
-										@click-label="${this._handleLabelClick}"></uui-menu-item>
-								`)}
-						</div>
-					</uui-popover>
-				</uui-tab>
-			`);
-    }
     render() {
         return html ` ${this._renderSections()} `;
     }
     static { this.styles = [
         css `
+			:host {
+				display: contents;
+			}
 			#tabs {
-				color: var(--uui-color-header-contrast);
 				height: 60px;
+				flex-basis: 100%;
 				font-size: 16px;
 				--uui-tab-text: var(--uui-color-header-contrast);
 				--uui-tab-text-hover: var(--uui-color-header-contrast-emphasis);
 				--uui-tab-text-active: var(--uui-color-header-contrast-emphasis);
-				--uui-tab-background: var(--uui-color-header-background);
-			}
-
-			#dropdown {
-				background-color: white;
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-				min-width: 200px;
-				color: black; /* Change to variable */
+				background-color: var(--uui-color-header-background);
+				--uui-tab-group-dropdown-background: var(--uui-color-header-surface);
 			}
 		`,
     ]; }
 };
-__decorate([
-    state()
-], UmbBackofficeHeaderSectionsElement.prototype, "_open", void 0);
 __decorate([
     state()
 ], UmbBackofficeHeaderSectionsElement.prototype, "_sections", void 0);
-__decorate([
-    state()
-], UmbBackofficeHeaderSectionsElement.prototype, "_extraSections", void 0);
 __decorate([
     state()
 ], UmbBackofficeHeaderSectionsElement.prototype, "_currentSectionAlias", void 0);

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/components/body-layout/body-layout.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UmbTextStyles } from "../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { css, html, LitElement, nothing, customElement, property, state, query, } from '../../../../external/lit/index.js';
 //TODO: Add the following attributes to JSDocs: header-transparent, main-no-padding, header-no-padding, header-fit-height
 /**
@@ -169,6 +169,7 @@ export let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement
 				height: 100%;
 				align-items: center;
 				box-sizing: border-box;
+				min-width: 0;
 			}
 
 			#navigation-slot,

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/core/section/section-main/section-main.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UmbTextStyles } from "../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { css, html, LitElement, customElement } from '../../../../external/lit/index.js';
 export let UmbSectionMainElement = class UmbSectionMainElement extends LitElement {
     render() {
@@ -20,6 +20,7 @@ export let UmbSectionMainElement = class UmbSectionMainElement extends LitElemen
 			:host {
 				flex: 1 1 auto;
 				height: 100%;
+				min-width: 0;
 			}
 
 			main {

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);