@umbraco-cms/backoffice 16.0.0-rc → 16.0.0-rc3

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

@@ -4,73 +4,91 @@ 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 { 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 { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-let UmbUiCultureInputElement = class UmbUiCultureInputElement extends UUIFormControlMixin(UmbLitElement, '') {
-    get value() {
-        return super.value;
-    }
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_DEFAULT_LOCALIZATION_CULTURE } from '@umbraco-cms/backoffice/localization-api';
+let UmbUiCultureInputElement = class UmbUiCultureInputElement extends UmbFormControlMixin(UmbLitElement) {
+    #invalidCulture;
+    #invalidBaseCulture;
     set value(value) {
-        if (typeof value === 'string') {
+        if (value && typeof value === 'string') {
             const oldValue = super.value;
             super.value = value.toLowerCase();
             this.requestUpdate('value', oldValue);
         }
     }
+    get value() {
+        return super.value;
+    }
     constructor() {
         super();
         this._options = [];
-        this.#observeTranslations();
-    }
-    #observeTranslations() {
-        this.observe(umbExtensionsRegistry.byType('localization'), (localizationManifests) => {
-            this.#mapToOptions(localizationManifests);
+        this.observe(umbExtensionsRegistry.byType('localization'), (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');
+        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);
     }
-    #mapToOptions(manifests) {
-        this._options = manifests
-            .filter((isoCode) => isoCode !== undefined)
-            .map((manifest) => ({
-            name: manifest.name,
-            value: manifest.meta.culture.toLowerCase(),
-        }));
-    }
-    getFormElement() {
-        return this._selectElement;
+    firstUpdated(_changedProperties) {
+        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) {
+        this.#invalidCulture = undefined;
+        this.#invalidBaseCulture = undefined;
         this.value = event.target.value.toString();
         this.dispatchEvent(new UmbChangeEvent());
     }
     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 { 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);

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

@@ -1,9 +1,9 @@
 export const manifests = [
     {
         type: 'localization',
-        alias: 'Umb.Localization.Ar',
+        alias: 'Umb.Localization.AR',
         weight: -100,
-        name: 'العربية',
+        name: 'Arabic Backoffice UI Localization',
         meta: {
             culture: 'ar',
         },
@@ -11,9 +11,9 @@ export const manifests = [
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Bs',
+        alias: 'Umb.Localization.BS',
         weight: -100,
-        name: 'Bosanski',
+        name: 'Bosnian Backoffice UI Localization',
         meta: {
             culture: 'bs',
         },
@@ -21,59 +21,49 @@ export const manifests = [
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Cs-CZ',
+        alias: 'Umb.Localization.CS',
         weight: -100,
-        name: 'česky',
+        name: 'Czech Backoffice UI Localization',
         meta: {
-            culture: 'cs-cz',
+            culture: 'cs',
         },
-        js: () => import('../../../assets/lang/cs-cz.js'),
+        js: () => import('../../../assets/lang/cs.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Cy-GB',
+        alias: 'Umb.Localization.CY',
         weight: -100,
-        name: 'Cymraeg (UK)',
+        name: 'Welsh Backoffice UI Localization',
         meta: {
-            culture: 'cy-gb',
+            culture: 'cy',
         },
-        js: () => import('../../../assets/lang/cy-gb.js'),
+        js: () => import('../../../assets/lang/cy.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Da_DK',
+        alias: 'Umb.Localization.DA',
         weight: -100,
-        name: 'Dansk (Danmark)',
+        name: 'Danish Backoffice UI Localization',
         meta: {
-            culture: 'da-dk',
+            culture: 'da',
         },
-        js: () => import('../../../assets/lang/da-dk.js'),
+        js: () => import('../../../assets/lang/da.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.De-DE',
+        alias: 'Umb.Localization.DE',
         weight: -100,
-        name: 'Deutsch (DE)',
+        name: 'German Backoffice UI Localization',
         meta: {
-            culture: 'de-de',
+            culture: 'de',
         },
-        js: () => import('../../../assets/lang/de-de.js'),
+        js: () => import('../../../assets/lang/de.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.De-CH',
+        alias: 'Umb.Localization.EN',
         weight: -100,
-        name: 'Deutsch (Schweiz)',
-        meta: {
-            culture: 'de-ch',
-        },
-        js: () => import('../../../assets/lang/de-ch.js'),
-    },
-    {
-        type: 'localization',
-        alias: 'Umb.Localization.En-GB',
-        weight: -100,
-        name: 'English (UK)',
+        name: 'English (United Kingdom) Backoffice UI Localization',
         meta: {
             culture: 'en',
         },
@@ -81,211 +71,201 @@ export const manifests = [
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.En_US',
+        alias: 'Umb.Localization.EN_US',
         weight: -100,
-        name: 'English (US)',
+        name: 'English (United States) Backoffice UI Localization',
         meta: {
-            culture: 'en-us',
+            culture: 'en-US',
         },
         js: () => import('../../../assets/lang/en-us.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Es-ES',
-        weight: -100,
-        name: 'español',
-        meta: {
-            culture: 'es-es',
-        },
-        js: () => import('../../../assets/lang/es-es.js'),
-    },
-    {
-        type: 'localization',
-        alias: 'Umb.Localization.Fr-FR',
+        alias: 'Umb.Localization.ES',
         weight: -100,
-        name: 'français',
+        name: 'Spanish Backoffice UI Localization',
         meta: {
-            culture: 'fr-fr',
+            culture: 'es',
         },
-        js: () => import('../../../assets/lang/fr-fr.js'),
+        js: () => import('../../../assets/lang/es.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Fr-CH',
+        alias: 'Umb.Localization.FR',
         weight: -100,
-        name: 'Français (Suisse)',
+        name: 'French Backoffice UI Localization',
         meta: {
-            culture: 'fr-ch',
+            culture: 'fr',
         },
-        js: () => import('../../../assets/lang/fr-ch.js'),
+        js: () => import('../../../assets/lang/fr.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.He-IL',
+        alias: 'Umb.Localization.HE',
         weight: -100,
-        name: 'Hebrew',
+        name: 'Hebrew Backoffice UI Localization',
         meta: {
-            culture: 'he-il',
+            culture: 'he',
         },
-        js: () => import('../../../assets/lang/he-il.js'),
+        js: () => import('../../../assets/lang/he.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Hr-HR',
+        alias: 'Umb.Localization.HR',
         weight: -100,
-        name: 'Hrvatski',
+        name: 'Croatian Backoffice UI Localization',
         meta: {
-            culture: 'hr-hr',
+            culture: 'hr',
         },
-        js: () => import('../../../assets/lang/hr-hr.js'),
+        js: () => import('../../../assets/lang/hr.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.It-IT',
+        alias: 'Umb.Localization.IT',
         weight: -100,
-        name: 'italiano',
+        name: 'Italian Backoffice UI Localization',
         meta: {
-            culture: 'it-it',
+            culture: 'it',
         },
-        js: () => import('../../../assets/lang/it-it.js'),
+        js: () => import('../../../assets/lang/it.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.It-CH',
+        alias: 'Umb.Localization.JA',
         weight: -100,
-        name: 'Italiano (Svizerra)',
+        name: 'Japanese Backoffice UI Localization',
         meta: {
-            culture: 'it-ch',
+            culture: 'ja',
         },
-        js: () => import('../../../assets/lang/it-ch.js'),
+        js: () => import('../../../assets/lang/ja.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Ja-JP',
+        alias: 'Umb.Localization.KO',
         weight: -100,
-        name: '日本語',
+        name: 'Korean Backoffice UI Localization',
         meta: {
-            culture: 'ja-jp',
+            culture: 'ko',
         },
-        js: () => import('../../../assets/lang/ja-jp.js'),
+        js: () => import('../../../assets/lang/ko.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Ko-KR',
+        alias: 'Umb.Localization.NB',
         weight: -100,
-        name: '한국어',
+        name: 'Norwegian Backoffice UI Localization',
         meta: {
-            culture: 'ko-kr',
+            culture: 'nb',
         },
-        js: () => import('../../../assets/lang/ko-kr.js'),
+        js: () => import('../../../assets/lang/nb.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Nb-NO',
+        alias: 'Umb.Localization.NL',
         weight: -100,
-        name: 'norsk',
+        name: 'Dutch Backoffice UI Localization',
         meta: {
-            culture: 'nb-no',
+            culture: 'nl',
         },
-        js: () => import('../../../assets/lang/nb-no.js'),
+        js: () => import('../../../assets/lang/nl.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Nl-NL',
+        alias: 'Umb.Localization.PL',
         weight: -100,
-        name: 'Nederlands',
+        name: 'Polish Backoffice UI Localization',
         meta: {
-            culture: 'nl-nl',
+            culture: 'pl',
         },
-        js: () => import('../../../assets/lang/nl-nl.js'),
+        js: () => import('../../../assets/lang/pl.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Pl-PL',
+        alias: 'Umb.Localization.PT',
         weight: -100,
-        name: 'polski',
+        name: 'Portuguese Backoffice UI Localization',
         meta: {
-            culture: 'pl-pl',
+            culture: 'pt',
         },
-        js: () => import('../../../assets/lang/pl-pl.js'),
+        js: () => import('../../../assets/lang/pt.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Pt-BR',
+        alias: 'Umb.Localization.PT_BR',
         weight: -100,
-        name: 'Portuguese Brazil',
+        name: 'Portuguese (Brazil) Backoffice UI Localization',
         meta: {
-            culture: 'pt-br',
+            culture: 'pt-BR',
         },
         js: () => import('../../../assets/lang/pt-br.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Ro-RO',
+        alias: 'Umb.Localization.RO',
         weight: -100,
-        name: 'romana (Romania)',
+        name: 'Romanian Backoffice UI Localization',
         meta: {
-            culture: 'ro-ro',
+            culture: 'ro',
         },
-        js: () => import('../../../assets/lang/ro-ro.js'),
+        js: () => import('../../../assets/lang/ro.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Ru-RU',
+        alias: 'Umb.Localization.RU',
         weight: -100,
-        name: 'русский',
+        name: 'Russian Backoffice UI Localization',
         meta: {
-            culture: 'ru-ru',
+            culture: 'ru',
         },
-        js: () => import('../../../assets/lang/ru-ru.js'),
+        js: () => import('../../../assets/lang/ru.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Sv-SE',
+        alias: 'Umb.Localization.SV',
         weight: -100,
-        name: 'Svenska',
+        name: 'Swedish Backoffice UI Localization',
         meta: {
-            culture: 'sv-se',
+            culture: 'sv',
         },
-        js: () => import('../../../assets/lang/sv-se.js'),
+        js: () => import('../../../assets/lang/sv.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Tr-TR',
+        alias: 'Umb.Localization.TR',
         weight: -100,
-        name: 'Türkçe',
+        name: 'Turkish Backoffice UI Localization',
         meta: {
-            culture: 'tr-tr',
+            culture: 'tr',
         },
-        js: () => import('../../../assets/lang/tr-tr.js'),
+        js: () => import('../../../assets/lang/tr.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Uk-UA',
+        alias: 'Umb.Localization.UK',
         weight: -100,
-        name: 'Українська',
+        name: 'Ukrainian Backoffice UI Localization',
         meta: {
-            culture: 'uk-ua',
+            culture: 'uk',
         },
-        js: () => import('../../../assets/lang/uk-ua.js'),
+        js: () => import('../../../assets/lang/uk.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Zh-CN',
+        alias: 'Umb.Localization.ZH',
         weight: -100,
-        name: '中文（简体，中国）',
+        name: 'Chinese Backoffice UI Localization',
         meta: {
-            culture: 'zh-cn',
+            culture: 'zh',
         },
-        js: () => import('../../../assets/lang/zh-cn.js'),
+        js: () => import('../../../assets/lang/zh.js'),
     },
     {
         type: 'localization',
-        alias: 'Umb.Localization.Zh-TW',
+        alias: 'Umb.Localization.ZH_TW',
         weight: -100,
-        name: '中文（正體，台灣）',
+        name: 'Chinese (Taiwan) Backoffice UI Localization',
         meta: {
-            culture: 'zh-tw',
+            culture: 'zh-TW',
         },
         js: () => import('../../../assets/lang/zh-tw.js'),
     },

package/dist-cms/packages/core/menu/components/menu-item-layout/menu-item-layout.element.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, customElement, property, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { ensureSlash } from '@umbraco-cms/backoffice/router';
 import { debounce } from '@umbraco-cms/backoffice/utils';
 /**
  * @element umb-menu-item-layout
@@ -41,8 +42,12 @@ let UmbMenuItemLayoutElement = class UmbMenuItemLayoutElement extends UmbLitElem
             this._isActive = false;
             return;
         }
-        const location = window.location.pathname;
-        this._isActive = location.includes(this.href);
+        /* Check if the current location includes the href of this menu item
+        We ensure that the paths ends with a slash to avoid collisions with paths like /path-1 and /path-1-2 where /path is in both.
+        Instead we compare /path-1/ with /path-1-2/ which wont collide.*/
+        const location = ensureSlash(window.location.pathname);
+        const compareHref = ensureSlash(this.href);
+        this._isActive = location.includes(compareHref);
     }
     render() {
         return html `<uui-menu-item
@@ -58,7 +63,7 @@ let UmbMenuItemLayoutElement = class UmbMenuItemLayoutElement extends UmbLitElem
 						slot="actions"
 						.entityType=${this.entityType}
 						.unique=${null}
-						.label=${this.label}>
+						.label=${this.localize.term('actions_viewActionsFor', [this.label])}>
 					</umb-entity-actions-bundle>`
             : ''}
 			<slot></slot>

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

@@ -1,5 +1,7 @@
 export * from './components/index.js';
 export * from './menu-tree-structure-workspace-context-base.js';
+export * from './menu-structure-workspace-context.context-token.js';
+export * from './menu-variant-structure-workspace-context.context-token.js';
 export * from './menu-variant-tree-structure-workspace-context-base.js';
 export type * from './types.js';
 export type { UmbMenuStructureWorkspaceContext } from './menu-structure-workspace-context.interface.js';

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

@@ -1,3 +1,5 @@
 export * from './components/index.js';
 export * from './menu-tree-structure-workspace-context-base.js';
+export * from './menu-structure-workspace-context.context-token.js';
+export * from './menu-variant-structure-workspace-context.context-token.js';
 export * from './menu-variant-tree-structure-workspace-context-base.js';

package/dist-cms/packages/core/menu/menu-structure-workspace-context.context-token.d.ts

@@ -0,0 +1,3 @@
+import type { UmbMenuStructureWorkspaceContext } from './menu-structure-workspace-context.interface.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+export declare const UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT: UmbContextToken<UmbMenuStructureWorkspaceContext, UmbMenuStructureWorkspaceContext>;

package/dist-cms/packages/core/menu/menu-structure-workspace-context.context-token.js

@@ -0,0 +1,2 @@
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+export const UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT = new UmbContextToken('UmbWorkspaceContext', 'UmbMenuStructure');

package/dist-cms/packages/core/menu/menu-tree-structure-workspace-context-base.d.ts

@@ -7,6 +7,9 @@ interface UmbMenuTreeStructureWorkspaceContextBaseArgs {
 export declare abstract class UmbMenuTreeStructureWorkspaceContextBase extends UmbContextBase {
     #private;
     readonly structure: import("rxjs").Observable<UmbStructureItemModel[]>;
+    /**
+     * @deprecated Will be removed in v.18: Use UMB_PARENT_ENTITY_CONTEXT instead.
+     */
     readonly parent: import("rxjs").Observable<UmbStructureItemModel | undefined>;
     constructor(host: UmbControllerHost, args: UmbMenuTreeStructureWorkspaceContextBaseArgs);
 }