@umbraco-cms/backoffice 14.0.0-7247a987 → 14.0.0-78252bab

package/dist-cms/apps/app/app.element.d.ts

@@ -8,6 +8,17 @@ export declare class UmbAppElement extends UmbLitElement {
      * @remarks This is the base URL of the Umbraco server, not the base URL of the backoffice.
      */
     serverUrl: string;
+    /**
+     * The default culture to use for localization.
+     *
+     * When the current user is resolved, the culture will be set to the user's culture.
+     *
+     * @attr
+     * @remarks This is the default culture to use for localization, not the current culture.
+     * @example "en-us"
+     * @example "en"
+     */
+    culture: string;
     /**
      * The base path of the backoffice.
      *
@@ -16,7 +27,6 @@ export declare class UmbAppElement extends UmbLitElement {
     backofficePath: string;
     /**
      * Bypass authentication.
-     * @type {boolean}
      */
     bypassAuth: boolean;
     private _routes;

package/dist-cms/apps/app/app.element.js

@@ -4,6 +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 { umbTranslationRegistry } from '../../packages/core/localization/index.js';
 import { UMB_AUTH, UmbAuthFlow, UmbAuthContext } from '../../shared/auth/index.js';
 import { UMB_APP, UmbAppContext } from '../../shared/context/index.js';
 import { css, html, customElement, property } from '../../external/lit/index.js';
@@ -28,6 +29,17 @@ export let UmbAppElement = class UmbAppElement extends UmbLitElement {
          * @remarks This is the base URL of the Umbraco server, not the base URL of the backoffice.
          */
         this.serverUrl = window.location.origin;
+        /**
+         * The default culture to use for localization.
+         *
+         * When the current user is resolved, the culture will be set to the user's culture.
+         *
+         * @attr
+         * @remarks This is the default culture to use for localization, not the current culture.
+         * @example "en-us"
+         * @example "en"
+         */
+        this.culture = 'en-us';
         /**
          * The base path of the backoffice.
          *
@@ -36,7 +48,6 @@ export let UmbAppElement = class UmbAppElement extends UmbLitElement {
         this.backofficePath = '/umbraco';
         /**
          * Bypass authentication.
-         * @type {boolean}
          */
         // TODO: this might not be the right solution
         this.bypassAuth = false;
@@ -64,8 +75,17 @@ export let UmbAppElement = class UmbAppElement extends UmbLitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.#setLanguage();
         this.#setup();
     }
+    #setLanguage() {
+        umbTranslationRegistry.loadLanguage(this.culture);
+    }
+    #listenForLanguageChange(authContext) {
+        this.observe(authContext.languageIsoCode, (currentLanguageIsoCode) => {
+            umbTranslationRegistry.loadLanguage(currentLanguageIsoCode);
+        }, 'languageIsoCode');
+    }
     async #setup() {
         if (this.serverUrl === undefined)
             throw new Error('No serverUrl provided');
@@ -142,6 +162,7 @@ export let UmbAppElement = class UmbAppElement extends UmbLitElement {
             OpenAPI.TOKEN = () => this.#authFlow.performWithFreshTokens();
             OpenAPI.WITH_CREDENTIALS = true;
         }
+        this.#listenForLanguageChange(authContext);
         authContext.isLoggedIn.next(true);
     }
     #redirect() {
@@ -226,6 +247,9 @@ export let UmbAppElement = class UmbAppElement extends UmbLitElement {
 __decorate([
     property({ type: String })
 ], UmbAppElement.prototype, "serverUrl", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-culture' })
+], UmbAppElement.prototype, "culture", void 0);
 __decorate([
     property({ type: String })
     // TODO: get from server config

package/dist-cms/apps/backoffice/backoffice.context.d.ts

@@ -1,8 +1,12 @@
 import { UmbContextToken } from '../../libs/context-api/index.js';
+import { UmbExtensionManifestController } from '../../libs/extension-api/index.js';
+import { UmbControllerHost } from '../../libs/controller-api/index.js';
+import { ManifestSection } from '../../packages/core/extension-registry/index.js';
 export declare class UmbBackofficeContext {
     #private;
     readonly activeSectionAlias: import("rxjs").Observable<string | undefined>;
-    readonly allowedSections: import("rxjs").Observable<import("../../packages/core/extension-registry/index.js").ManifestSection[]>;
+    readonly allowedSections: import("rxjs").Observable<UmbExtensionManifestController<ManifestSection>[]>;
+    constructor(host: UmbControllerHost);
     setActiveSectionAlias(alias: string): void;
 }
 export declare const UMB_BACKOFFICE_CONTEXT_TOKEN: UmbContextToken<UmbBackofficeContext>;

package/dist-cms/apps/backoffice/backoffice.context.js

@@ -1,13 +1,21 @@
-import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
 import { UmbContextToken } from '../../libs/context-api/index.js';
-import { UmbStringState } from '../../libs/observable-api/index.js';
+import { UmbBasicState, UmbStringState } from '../../libs/observable-api/index.js';
+import { UmbExtensionsManifestController } from '../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
 export class UmbBackofficeContext {
-    constructor() {
+    #activeSectionAlias;
+    // TODO: We need a class array state:
+    #allowedSections;
+    constructor(host) {
         this.#activeSectionAlias = new UmbStringState(undefined);
         this.activeSectionAlias = this.#activeSectionAlias.asObservable();
-        this.allowedSections = umbExtensionsRegistry.extensionsOfType('section');
+        // TODO: We need a class array state:
+        this.#allowedSections = new UmbBasicState([]);
+        this.allowedSections = this.#allowedSections.asObservable();
+        new UmbExtensionsManifestController(host, umbExtensionsRegistry, 'section', null, (sections) => {
+            this.#allowedSections.next([...sections]);
+        });
     }
-    #activeSectionAlias;
     setActiveSectionAlias(alias) {
         this.#activeSectionAlias.next(alias);
     }

package/dist-cms/apps/backoffice/backoffice.element.d.ts

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

package/dist-cms/apps/backoffice/backoffice.element.js

@@ -4,8 +4,8 @@ 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 { UmbExtensionInitializer } from './extension.controller.js';
 import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context.js';
+import { UmbExtensionInitializer } from './extension-initializer.controller.js';
 import { css, html, customElement } from '../../external/lit/index.js';
 import { UUITextStyles } from '../../external/uui/index.js';
 import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
@@ -19,7 +19,7 @@ const CORE_PACKAGES = [
     import('../../packages/documents/umbraco-package.js'),
     import('../../packages/media/umbraco-package.js'),
     import('../../packages/members/umbraco-package.js'),
-    import('../../packages/translation/umbraco-package.js'),
+    import('../../packages/dictionary/umbraco-package.js'),
     import('../../packages/users/umbraco-package.js'),
     import('../../packages/packages/umbraco-package.js'),
     import('../../packages/search/umbraco-package.js'),
@@ -28,14 +28,13 @@ const CORE_PACKAGES = [
     import('../../packages/tags/umbraco-package.js'),
 ];
 export let UmbBackofficeElement = class UmbBackofficeElement extends UmbLitElement {
-    #extensionInitializer = new UmbExtensionInitializer(this, umbExtensionsRegistry);
     constructor() {
         super();
-        this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext());
+        this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext(this));
         new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
         new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry);
-        new UmbExtensionInitializer(this, umbExtensionsRegistry);
-        this.#extensionInitializer.setLocalPackages(CORE_PACKAGES);
+        const extensionInitializer = new UmbExtensionInitializer(this, umbExtensionsRegistry);
+        extensionInitializer.setLocalPackages(CORE_PACKAGES);
     }
     render() {
         return html `

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

@@ -3,13 +3,11 @@ import { UmbLitElement } from '../../../shared/lit-element/index.js';
 export declare class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
     private _open;
     private _sections;
-    private _visibleSections;
     private _extraSections;
     private _currentSectionAlias;
     private _backofficeContext?;
     constructor();
     private _handleMore;
-    private _handleSectionTabClick;
     private _handleLabelClick;
     private _observeSections;
     private _observeCurrentSection;

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

@@ -5,14 +5,13 @@ 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 } from '../../../external/lit/index.js';
+import { css, html, when, 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._visibleSections = [];
         this._extraSections = [];
         this._currentSectionAlias = '';
         this.consumeContext(UMB_BACKOFFICE_CONTEXT_TOKEN, (backofficeContext) => {
@@ -25,9 +24,6 @@ export let UmbBackofficeHeaderSectionsElement = class UmbBackofficeHeaderSection
         e.stopPropagation();
         this._open = !this._open;
     }
-    _handleSectionTabClick(alias) {
-        this._backofficeContext?.setActiveSectionAlias(alias);
-    }
     _handleLabelClick() {
         const moreTab = this.shadowRoot?.getElementById('moreTab');
         moreTab?.setAttribute('active', 'true');
@@ -37,8 +33,9 @@ export let UmbBackofficeHeaderSectionsElement = class UmbBackofficeHeaderSection
         if (!this._backofficeContext)
             return;
         this.observe(this._backofficeContext.allowedSections, (allowedSections) => {
+            const oldValue = this._sections;
             this._sections = allowedSections;
-            this._visibleSections = this._sections;
+            this.requestUpdate('_sections', oldValue);
         });
     }
     _observeCurrentSection() {
@@ -51,12 +48,11 @@ export let UmbBackofficeHeaderSectionsElement = class UmbBackofficeHeaderSection
     _renderSections() {
         return html `
 			<uui-tab-group id="tabs">
-				${this._visibleSections.map((section) => html `
+				${repeat(this._sections, (section) => section.alias, (section) => html `
 						<uui-tab
-							@click="${() => this._handleSectionTabClick(section.alias)}"
 							?active="${this._currentSectionAlias === section.alias}"
-							href="${`section/${section.meta.pathname}`}"
-							label="${section.meta.label || section.name}"></uui-tab>
+							href="${`section/${section.manifest?.meta.pathname}`}"
+							label="${section.manifest?.meta.label ?? section.manifest?.name ?? ''}"></uui-tab>
 					`)}
 				${this._renderExtraSections()}
 			</uui-tab-group>
@@ -116,9 +112,6 @@ __decorate([
 __decorate([
     state()
 ], UmbBackofficeHeaderSectionsElement.prototype, "_sections", void 0);
-__decorate([
-    state()
-], UmbBackofficeHeaderSectionsElement.prototype, "_visibleSections", void 0);
 __decorate([
     state()
 ], UmbBackofficeHeaderSectionsElement.prototype, "_extraSections", void 0);

package/dist-cms/apps/backoffice/components/backoffice-main.element.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_BACKOFFICE_CONTEXT_TOKEN } from '../backoffice.context.js';
 import { css, html, customElement, state } from '../../../external/lit/index.js';
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../../../packages/core/section/index.js';
-import { createExtensionElementOrFallback } from '../../../libs/extension-api/index.js';
+import { createExtensionElementOrFallback, } from '../../../libs/extension-api/index.js';
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 export let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElement {
     constructor() {
@@ -17,11 +17,11 @@ export let UmbBackofficeMainElement = class UmbBackofficeMainElement extends Umb
         this._routePrefix = 'section/';
         this._onRouteChange = (event) => {
             const currentPath = event.target.localActiveViewPath || '';
-            const section = this._sections.find((s) => this._routePrefix + s.meta.pathname === currentPath);
+            const section = this._sections.find((s) => this._routePrefix + s.manifest.meta.pathname === currentPath);
             if (!section)
                 return;
             this._backofficeContext?.setActiveSectionAlias(section.alias);
-            this._provideSectionContext(section);
+            this._provideSectionContext(section.manifest);
         };
         this.consumeContext(UMB_BACKOFFICE_CONTEXT_TOKEN, (_instance) => {
             this._backofficeContext = _instance;
@@ -39,6 +39,7 @@ export let UmbBackofficeMainElement = class UmbBackofficeMainElement extends Umb
     _createRoutes() {
         if (!this._sections)
             return;
+        const oldValue = this._routes;
         // TODO: Refactor this for re-use across the app where the routes are re-generated at any time.
         // TODO: remove section-routes that does not exist anymore.
         this._routes = this._sections.map((section) => {
@@ -49,10 +50,10 @@ export let UmbBackofficeMainElement = class UmbBackofficeMainElement extends Umb
             else {
                 return {
                     alias: section.alias,
-                    path: this._routePrefix + section.meta.pathname,
-                    component: () => createExtensionElementOrFallback(section, 'umb-section-default'),
+                    path: this._routePrefix + section.manifest.meta.pathname,
+                    component: () => createExtensionElementOrFallback(section.manifest, 'umb-section-default'),
                     setup: (component) => {
-                        component.manifest = section;
+                        component.manifest = section.manifest;
                     },
                 };
             }
@@ -64,14 +65,15 @@ export let UmbBackofficeMainElement = class UmbBackofficeMainElement extends Umb
                 redirectTo: 'section/content',
             });
         }
+        this.requestUpdate('_routes', oldValue);
     }
-    _provideSectionContext(section) {
+    _provideSectionContext(sectionManifest) {
         if (!this._sectionContext) {
-            this._sectionContext = new UmbSectionContext(section);
+            this._sectionContext = new UmbSectionContext(sectionManifest);
             this.provideContext(UMB_SECTION_CONTEXT_TOKEN, this._sectionContext);
         }
         else {
-            this._sectionContext.setManifest(section);
+            this._sectionContext.setManifest(sectionManifest);
         }
     }
     render() {

package/dist-cms/apps/backoffice/{extension.controller.js → extension-initializer.controller.js}

@@ -3,6 +3,8 @@ import { PackageResource, OpenAPI } from '../../external/backend-api/index.js';
 import { UmbBaseController } from '../../libs/controller-api/index.js';
 import { tryExecuteAndNotify } from '../../shared/resources/index.js';
 import { isManifestJSType } from '../../libs/extension-api/index.js';
+// TODO: consider if this can be replaced by the new extension controllers.
+// TODO: move local part out of this, and name something with server.
 export class UmbExtensionInitializer extends UmbBaseController {
     #extensionRegistry;
     #unobserve = new Subject();

package/dist-cms/apps/installer/error/installer-error.element.d.ts

@@ -1,8 +1,8 @@
 import { CSSResultGroup } from '../../../external/lit/index.js';
-import { ProblemDetailsModel } from '../../../external/backend-api/index.js';
+import { ProblemDetails } from '../../../external/backend-api/index.js';
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 export declare class UmbInstallerErrorElement extends UmbLitElement {
-    _error?: ProblemDetailsModel;
+    _error?: ProblemDetails;
     private _installerContext?;
     connectedCallback(): void;
     private _observeInstallStatus;

package/dist-cms/apps/installer/installer.context.d.ts

@@ -1,5 +1,5 @@
 import type { Observable } from '../../external/rxjs/index.js';
-import { InstallVResponseModel, InstallSettingsResponseModel, ProblemDetailsModel } from '../../external/backend-api/index.js';
+import { InstallVResponseModel, InstallSettingsResponseModel, ProblemDetails } from '../../external/backend-api/index.js';
 import { UmbContextToken } from '../../libs/context-api/index.js';
 /**
  * Context API for the installer
@@ -14,7 +14,7 @@ export declare class UmbInstallerContext {
     private _settings;
     readonly settings: Observable<InstallSettingsResponseModel | undefined>;
     private _installStatus;
-    readonly installStatus: Observable<ProblemDetailsModel | null>;
+    readonly installStatus: Observable<ProblemDetails | null>;
     constructor();
     /**
      * Observable method to get the current step in the installation process
@@ -26,10 +26,10 @@ export declare class UmbInstallerContext {
     /**
      * Observable method to get the install status in the installation process
      * @public
-     * @return {*}  {(Observable<ProblemDetailsModel | null>)}
+     * @return {*}  {(Observable<ProblemDetails | null>)}
      * @memberof UmbInstallerContext
      */
-    installStatusChanges(): Observable<ProblemDetailsModel | null>;
+    installStatusChanges(): Observable<ProblemDetails | null>;
     /**
      * Increment the current step in the installation process
      * @public
@@ -65,10 +65,10 @@ export declare class UmbInstallerContext {
     /**
      * Set the install status
      * @public
-     * @param {(ProblemDetailsModel | null)} status
+     * @param {(ProblemDetails | null)} status
      * @memberof UmbInstallerContext
      */
-    setInstallStatus(status: ProblemDetailsModel | null): void;
+    setInstallStatus(status: ProblemDetails | null): void;
     /**
      * Load installer settings from the API
      * @private

package/dist-cms/apps/installer/installer.context.js

@@ -35,7 +35,7 @@ export class UmbInstallerContext {
     /**
      * Observable method to get the install status in the installation process
      * @public
-     * @return {*}  {(Observable<ProblemDetailsModel | null>)}
+     * @return {*}  {(Observable<ProblemDetails | null>)}
      * @memberof UmbInstallerContext
      */
     installStatusChanges() {
@@ -87,7 +87,7 @@ export class UmbInstallerContext {
     /**
      * Set the install status
      * @public
-     * @param {(ProblemDetailsModel | null)} status
+     * @param {(ProblemDetails | null)} status
      * @memberof UmbInstallerContext
      */
     setInstallStatus(status) {

package/dist-cms/assets/lang/da-dk.d.ts

@@ -0,0 +1,3 @@
+import type { UmbTranslationsDictionary } from '../../libs/localization-api/index.js';
+declare const _default: UmbTranslationsDictionary;
+export default _default;