@umbraco-cms/backoffice 15.3.1 → 15.4.0-rc

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

@@ -1,7 +1,30 @@
-import { UmbLitElement } from '../../packages/core/lit-element/index.js';
 import { nothing } from '../../external/lit/index.js';
+import { UmbLitElement } from '../../packages/core/lit-element/index.js';
 export declare class UmbAppLogoElement extends UmbLitElement {
-    private _logoUrl?;
+    /**
+     * The loading attribute of the image.
+     * @type {'lazy' | 'eager'}
+     * @default 'eager'
+     */
+    loading: 'lazy' | 'eager';
+    /**
+     * The type of logo to display. Mark will display the mark logo, and logo will display the full logo with text.
+     * @type {'mark' | 'logo'}
+     * @default 'mark'
+     */
+    logoType: 'mark' | 'logo';
+    /**
+     * Override the application theme, for example if you want to display the dark theme logo on a light theme.
+     * @example 'umb-dark-theme'
+     * @type {string}
+     * @default undefined
+     */
+    overrideTheme?: string;
+    private _serverUrl?;
+    /**
+     * The theme of the application.
+     */
+    private _theme?;
     constructor();
     /**
      * Do not use shadow DOM for this element.

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

@@ -5,13 +5,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_APP_CONTEXT } from './app.context.js';
+import { customElement, html, nothing, property, state } from '../../external/lit/index.js';
 import { UmbLitElement } from '../../packages/core/lit-element/index.js';
-import { customElement, html, nothing, state } from '../../external/lit/index.js';
+import { UMB_THEME_CONTEXT } from '../../packages/core/themes/index.js';
 let UmbAppLogoElement = class UmbAppLogoElement extends UmbLitElement {
     constructor() {
         super();
+        /**
+         * The loading attribute of the image.
+         * @type {'lazy' | 'eager'}
+         * @default 'eager'
+         */
+        this.loading = 'lazy';
+        /**
+         * The type of logo to display. Mark will display the mark logo, and logo will display the full logo with text.
+         * @type {'mark' | 'logo'}
+         * @default 'mark'
+         */
+        this.logoType = 'mark';
         this.consumeContext(UMB_APP_CONTEXT, (instance) => {
-            this._logoUrl = `${instance.getServerUrl()}/umbraco/management/api/v1/security/back-office/graphics/logo`;
+            this._serverUrl = instance.getServerUrl();
+        });
+        this.consumeContext(UMB_THEME_CONTEXT, (context) => {
+            this.observe(context.theme, (theme) => {
+                this._theme = theme;
+            }, '_observeTheme');
         });
     }
     /**
@@ -22,15 +40,36 @@ let UmbAppLogoElement = class UmbAppLogoElement extends UmbLitElement {
         return this;
     }
     render() {
-        if (!this._logoUrl) {
+        if (!this._serverUrl) {
             return nothing;
         }
-        return html `<img .src=${this._logoUrl} aria-hidden="true" loading="eager" alt="logo" style="height: 100%" />`;
+        /**
+         * This is a temporary solution until we have a better way to define the logo characteristics.
+         * TODO: The characteristics of the logo are not defined in any theme meta data, so we have to hardcode the logo file names.
+         */
+        let logoFile = (this.overrideTheme ?? this._theme) === 'umb-dark-theme' ? 'logo' : 'logo-alternative';
+        if (this.logoType === 'logo') {
+            logoFile = `login-${logoFile}`;
+        }
+        const logoUrl = `${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/${logoFile}`;
+        return html `<img src=${logoUrl} aria-hidden="true" loading=${this.loading} alt="logo" />`;
     }
 };
+__decorate([
+    property()
+], UmbAppLogoElement.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, attribute: 'logo-type' })
+], UmbAppLogoElement.prototype, "logoType", void 0);
+__decorate([
+    property({ attribute: 'override-theme' })
+], UmbAppLogoElement.prototype, "overrideTheme", void 0);
+__decorate([
+    state()
+], UmbAppLogoElement.prototype, "_serverUrl", void 0);
 __decorate([
     state()
-], UmbAppLogoElement.prototype, "_logoUrl", void 0);
+], UmbAppLogoElement.prototype, "_theme", void 0);
 UmbAppLogoElement = __decorate([
     customElement('umb-app-logo')
 ], UmbAppLogoElement);

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

@@ -30,18 +30,16 @@ export class UmbBackofficeContext extends UmbContextBase {
                 this.#getVersion();
             });
         });
-        this.#init();
-    }
-    async #init() {
-        const userContext = await this.getContext(UMB_CURRENT_USER_CONTEXT);
-        this.observe(userContext.allowedSections, (allowedSections) => {
-            if (!allowedSections)
-                return;
-            // TODO: Please be aware that we re-initialize this initializer based on user permissions. I suggest we should solve this specific case should be improved by the ability to change the filter [NL]
-            new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'section', (manifest) => allowedSections.includes(manifest.alias), async (sections) => {
-                this.#allowedSections.setValue([...sections]);
-            }, 'umbAllowedSectionsManifestInitializer');
-        }, 'umbAllowedSectionsObserver');
+        this.consumeContext(UMB_CURRENT_USER_CONTEXT, (userContext) => {
+            this.observe(userContext.allowedSections, (allowedSections) => {
+                if (!allowedSections)
+                    return;
+                // TODO: Please be aware that we re-initialize this initializer based on user permissions. I suggest we should solve this specific case should be improved by the ability to change the filter [NL]
+                new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'section', (manifest) => allowedSections.includes(manifest.alias), async (sections) => {
+                    this.#allowedSections.setValue(sections);
+                }, 'umbAllowedSectionsManifestInitializer');
+            }, 'umbAllowedSectionsObserver');
+        });
     }
     async #getVersion() {
         const { data } = await tryExecute(ServerService.getServerInformation());

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

@@ -1,10 +1,19 @@
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+/**
+ * The backoffice header logo element.
+ * @cssprop --umb-header-logo-display - The display property of the header logo.
+ * @cssprop --umb-header-logo-margin - The margin of the header logo.
+ * @cssprop --umb-header-logo-width - The width of the header logo.
+ * @cssprop --umb-header-logo-height - The height of the header logo.
+ * @cssprop --umb-logo-display - The display property of the logo.
+ * @cssprop --umb-logo-width - The width of the logo.
+ * @cssprop --umb-logo-height - The height of the logo.
+ */
 export declare class UmbBackofficeHeaderLogoElement extends UmbLitElement {
     #private;
     private _version?;
     private _isUserAdmin;
     private _serverUpgradeCheck;
-    private _serverUrl;
     constructor();
     protected firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -5,20 +5,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BACKOFFICE_CONTEXT } from '../backoffice.context.js';
-import { isCurrentUserAnAdmin } from '../../../packages/user/current-user/index.js';
 import { css, html, customElement, state } from '../../../external/lit/index.js';
+import { isCurrentUserAnAdmin } from '../../../packages/user/current-user/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
 import { UmbTextStyles } from '../../../packages/core/style/index.js';
-import { UMB_APP_CONTEXT } from '../../app/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT } from '../../../packages/core/modal/index.js';
 import { UMB_NEWVERSION_MODAL, UMB_SYSINFO_MODAL } from '../../../packages/sysinfo/index.js';
+/**
+ * The backoffice header logo element.
+ * @cssprop --umb-header-logo-display - The display property of the header logo.
+ * @cssprop --umb-header-logo-margin - The margin of the header logo.
+ * @cssprop --umb-header-logo-width - The width of the header logo.
+ * @cssprop --umb-header-logo-height - The height of the header logo.
+ * @cssprop --umb-logo-display - The display property of the logo.
+ * @cssprop --umb-logo-width - The width of the logo.
+ * @cssprop --umb-logo-height - The height of the logo.
+ */
 let UmbBackofficeHeaderLogoElement = class UmbBackofficeHeaderLogoElement extends UmbLitElement {
     #backofficeContext;
     constructor() {
         super();
         this._isUserAdmin = false;
         this._serverUpgradeCheck = null;
-        this._serverUrl = '';
         this.consumeContext(UMB_BACKOFFICE_CONTEXT, (context) => {
             this.observe(context.version, (version) => {
                 if (!version)
@@ -27,9 +35,6 @@ let UmbBackofficeHeaderLogoElement = class UmbBackofficeHeaderLogoElement extend
             }, '_observeVersion');
             this.#backofficeContext = context;
         });
-        this.consumeContext(UMB_APP_CONTEXT, (context) => {
-            this._serverUrl = context.getServerUrl();
-        });
     }
     async firstUpdated() {
         this.#isAdmin();
@@ -42,19 +47,13 @@ let UmbBackofficeHeaderLogoElement = class UmbBackofficeHeaderLogoElement extend
     }
     render() {
         return html `
-			<uui-button id="logo" look="primary" label="Logo" compact popovertarget="logo-popover">
-				<umb-app-logo id="logo-img"></umb-app-logo>
+			<uui-button id="header-logo-button" look="primary" label="Logo" compact popovertarget="logo-popover">
+				<umb-app-logo id="header-logo" loading="eager" override-theme="umb-dark-theme"></umb-app-logo>
 			</uui-button>
 			<uui-popover-container id="logo-popover" placement="bottom-start">
 				<umb-popover-layout>
 					<div id="modal">
-						<img
-							aria-hidden="true"
-							src="${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-logo-alternative"
-							alt="logo"
-							width="300"
-							height="82"
-							loading="lazy" />
+						<umb-app-logo id="logo" logo-type="logo"></umb-app-logo>
 						<span>${this._version}</span>
 
 						${this._serverUpgradeCheck
@@ -96,17 +95,25 @@ let UmbBackofficeHeaderLogoElement = class UmbBackofficeHeaderLogoElement extend
     static { this.styles = [
         UmbTextStyles,
         css `
-			#logo {
-				display: var(--umb-header-logo-display, inline);
+			#header-logo-button {
 				--uui-button-padding-top-factor: 1;
 				--uui-button-padding-bottom-factor: 0.5;
-				margin-right: var(--uui-size-space-2);
 				--uui-button-background-color: transparent;
+				display: var(--umb-header-logo-display, inline);
+				margin: var(--umb-header-logo-margin, 0 var(--uui-size-space-2) 0 0);
 			}
 
-			#logo-img {
-				display: block;
-				height: var(--uui-size-10);
+			#header-logo > img {
+				width: var(--umb-header-logo-width, auto);
+				height: var(--umb-header-logo-height, 30px);
+			}
+
+			#logo {
+				display: var(--umb-logo-display, block);
+				> img {
+					width: var(--umb-logo-width, auto);
+					height: var(--umb-logo-height, 55px);
+				}
 			}
 
 			#modal {
@@ -129,9 +136,6 @@ __decorate([
 __decorate([
     state()
 ], UmbBackofficeHeaderLogoElement.prototype, "_serverUpgradeCheck", void 0);
-__decorate([
-    state()
-], UmbBackofficeHeaderLogoElement.prototype, "_serverUrl", void 0);
 UmbBackofficeHeaderLogoElement = __decorate([
     customElement('umb-backoffice-header-logo')
 ], UmbBackofficeHeaderLogoElement);

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

@@ -8,7 +8,6 @@ export declare class UmbBackofficeMainElement extends UmbLitElement {
     constructor();
     private _observeBackoffice;
     private _createRoutes;
-    private _onRouteChange;
     private _provideSectionContext;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_BACKOFFICE_CONTEXT } from '../backoffice.context.js';
 import { css, html, customElement, state, nothing } from '../../../external/lit/index.js';
-import { UmbSectionContext, UMB_SECTION_CONTEXT, UMB_SECTION_PATH_PATTERN } from '../../../packages/core/section/index.js';
+import { UmbSectionContext, UMB_SECTION_PATH_PATTERN } from '../../../packages/core/section/index.js';
 import { createExtensionElement } from '../../../libs/extension-api/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
 let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElement {
@@ -14,17 +14,6 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
         super();
         this._routes = [];
         this._sections = [];
-        this._onRouteChange = async (event) => {
-            const currentPath = event.target.localActiveViewPath || '';
-            const section = this._sections.find((s) => UMB_SECTION_PATH_PATTERN.generateLocal({ sectionName: s.manifest.meta.pathname }) === currentPath);
-            if (!section)
-                return;
-            await section.asPromise();
-            if (section.manifest) {
-                this._backofficeContext?.setActiveSectionAlias(section.alias);
-                this._provideSectionContext(section.manifest);
-            }
-        };
         this.consumeContext(UMB_BACKOFFICE_CONTEXT, (_instance) => {
             this._backofficeContext = _instance;
             this._observeBackoffice();
@@ -33,7 +22,7 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
     async _observeBackoffice() {
         if (this._backofficeContext) {
             this.observe(this._backofficeContext.allowedSections, (sections) => {
-                this._sections = sections;
+                this._sections = sections.filter((x) => x.manifest);
                 this._createRoutes();
             }, 'observeAllowedSections');
         }
@@ -42,49 +31,40 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
         if (!this._sections)
             return;
         // TODO: Refactor this for re-use across the app where the routes are re-generated at any time.
-        const newRoutes = this._sections
-            .filter((x) => x.manifest)
-            .map((section) => {
-            const existingRoute = this._routes.find((r) => r.path === UMB_SECTION_PATH_PATTERN.generateLocal({ sectionName: section.manifest.meta.pathname }));
-            if (existingRoute) {
-                return existingRoute;
-            }
-            else {
-                return {
-                    //alias: section.alias,
-                    path: UMB_SECTION_PATH_PATTERN.generateLocal({ sectionName: section.manifest.meta.pathname }),
-                    component: () => createExtensionElement(section.manifest, 'umb-section-default'),
-                    setup: (component) => {
+        const newRoutes = this._sections.map((section) => {
+            return {
+                path: UMB_SECTION_PATH_PATTERN.generateLocal({ sectionName: section.manifest.meta.pathname }),
+                component: () => createExtensionElement(section.manifest, 'umb-section-default'),
+                setup: (component) => {
+                    const manifest = section.manifest;
+                    if (manifest) {
                         component.manifest = section.manifest;
-                    },
-                };
-            }
+                        this._backofficeContext?.setActiveSectionAlias(manifest.alias);
+                        this._provideSectionContext(manifest);
+                    }
+                },
+            };
         });
         if (newRoutes.length > 0) {
-            newRoutes.push({
-                ...newRoutes[0],
-                path: ``,
-            });
             newRoutes.push({
                 path: `**`,
                 component: async () => (await import('../../../packages/core/router/index.js')).UmbRouteNotFoundElement,
             });
+            newRoutes.push({
+                redirectTo: newRoutes[0].path,
+                path: ``,
+            });
         }
         this._routes = newRoutes;
     }
     _provideSectionContext(sectionManifest) {
         if (!this._sectionContext) {
-            this._sectionContext = new UmbSectionContext(sectionManifest);
-            this.provideContext(UMB_SECTION_CONTEXT, this._sectionContext);
-        }
-        else {
-            this._sectionContext.setManifest(sectionManifest);
+            this._sectionContext = new UmbSectionContext(this);
         }
+        this._sectionContext.setManifest(sectionManifest);
     }
     render() {
-        return this._routes.length > 0
-            ? html `<umb-router-slot .routes=${this._routes} @change=${this._onRouteChange}></umb-router-slot>`
-            : nothing;
+        return this._routes.length > 0 ? html `<umb-router-slot .routes=${this._routes}></umb-router-slot>` : nothing;
     }
     static { this.styles = [
         css `

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

@@ -1,11 +1,13 @@
 import type { Observable } from '../../external/rxjs/index.js';
 import type { InstallSettingsResponseModel, ProblemDetails, InstallRequestModel } from '../../external/backend-api/index.js';
 import { UmbContextToken } from '../../libs/context-api/index.js';
+import type { UmbControllerHost } from '../../libs/controller-api/index.js';
+import { UmbContextBase } from '../../libs/class-api/index.js';
 /**
  * Context API for the installer
  * @class UmbInstallerContext
  */
-export declare class UmbInstallerContext {
+export declare class UmbInstallerContext extends UmbContextBase<UmbInstallerContext, typeof UMB_INSTALLER_CONTEXT> {
     private _data;
     readonly data: Observable<InstallRequestModel>;
     private _currentStep;
@@ -14,7 +16,7 @@ export declare class UmbInstallerContext {
     readonly settings: Observable<InstallSettingsResponseModel | undefined>;
     private _installStatus;
     readonly installStatus: Observable<ProblemDetails | null>;
-    constructor();
+    constructor(host: UmbControllerHost);
     /**
      * Observable method to get the current step in the installation process
      * @public

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

@@ -2,12 +2,14 @@ import { InstallService, TelemetryLevelModel } from '../../external/backend-api/
 import { tryExecute } from '../../packages/core/resources/index.js';
 import { UmbContextToken } from '../../libs/context-api/index.js';
 import { UmbObjectState, UmbNumberState } from '../../libs/observable-api/index.js';
+import { UmbContextBase } from '../../libs/class-api/index.js';
 /**
  * Context API for the installer
  * @class UmbInstallerContext
  */
-export class UmbInstallerContext {
-    constructor() {
+export class UmbInstallerContext extends UmbContextBase {
+    constructor(host) {
+        super(host, UMB_INSTALLER_CONTEXT);
         this._data = new UmbObjectState({
             user: { name: '', email: '', password: '', subscribeToNewsletter: false },
             database: { id: '', providerName: '', useIntegratedAuthentication: false, trustServerCertificate: false },

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

@@ -8,7 +8,6 @@ import './user/installer-user.element.js';
 export declare class UmbInstallerElement extends UmbLitElement {
     step: number;
     private _umbInstallerContext;
-    constructor();
     connectedCallback(): void;
     private _observeCurrentStep;
     private _renderSection;

package/dist-cms/apps/installer/installer.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 { UmbInstallerContext, UMB_INSTALLER_CONTEXT } from './installer.context.js';
+import { UmbInstallerContext } from './installer.context.js';
 import { html, customElement, state } from '../../external/lit/index.js';
 import { UmbLitElement } from '../../packages/core/lit-element/index.js';
 import './consent/installer-consent.element.js';
@@ -15,10 +15,9 @@ import './shared/layout/installer-layout.element.js';
 import './user/installer-user.element.js';
 let UmbInstallerElement = class UmbInstallerElement extends UmbLitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.step = 1;
-        this._umbInstallerContext = new UmbInstallerContext();
-        this.provideContext(UMB_INSTALLER_CONTEXT, this._umbInstallerContext);
+        this._umbInstallerContext = new UmbInstallerContext(this);
     }
     connectedCallback() {
         super.connectedCallback();

package/dist-cms/apps/installer/shared/layout/installer-layout.element.js

@@ -33,7 +33,8 @@ let UmbInstallerLayoutElement = class UmbInstallerLayoutElement extends LitEleme
 				height: 100%;
 
 				background-color: hsla(240, 68%, 11%, 1);
-				background-image: radial-gradient(at 99% 2%, hsla(212, 40%, 12%, 1) 0px, transparent 50%),
+				background-image:
+					radial-gradient(at 99% 2%, hsla(212, 40%, 12%, 1) 0px, transparent 50%),
 					radial-gradient(at 98% 95%, hsla(255, 40%, 12%, 1) 0px, transparent 50%),
 					radial-gradient(at 1% 2%, hsla(249, 40%, 12%, 1) 0px, transparent 50%),
 					radial-gradient(at 2% 97%, hsla(228, 40%, 12%, 1) 0px, transparent 50%),

package/dist-cms/apps/installer/shared/utils.story-helpers.d.ts

@@ -1,3 +1,4 @@
 import { UmbInstallerContext } from '../installer.context.js';
+import type { UmbControllerHostElement } from '../../../libs/controller-api/index.js';
 import { type TemplateResult } from '../../../external/lit/index.js';
-export declare const installerContextProvider: (story: () => Node | string | TemplateResult, installerContext?: UmbInstallerContext) => TemplateResult<1>;
+export declare const installerContextProvider: (story: () => Node | string | TemplateResult, createContextMethod?: (host: UmbControllerHostElement) => UmbInstallerContext) => TemplateResult<1>;

package/dist-cms/apps/installer/shared/utils.story-helpers.js

@@ -1,10 +1,11 @@
 import { UmbInstallerContext } from '../installer.context.js';
 import { html } from '../../../external/lit/index.js';
-export const installerContextProvider = (story, installerContext = new UmbInstallerContext()) => html `
-	<umb-context-provider
+export const installerContextProvider = (story, createContextMethod = (host) => {
+    return new UmbInstallerContext(host);
+}) => html `
+	<umb-controller-host-provider
 		style="display: block;margin: 2rem 25%;padding: 1rem;border: 1px solid #ddd;"
-		key="umbInstallerContext"
-		.value=${installerContext}>
+		.create=${createContextMethod}>
 		${story()}
-	</umb-context-provider>
+	</umb-controller-host-provider>
 `;

package/dist-cms/apps/preview/apps/preview-culture.element.d.ts

@@ -1,6 +1,5 @@
 import { nothing } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
-declare const elementName = "umb-preview-culture";
 export declare class UmbPreviewCultureElement extends UmbLitElement {
     #private;
     private _culture?;
@@ -12,6 +11,6 @@ export declare class UmbPreviewCultureElement extends UmbLitElement {
 export { UmbPreviewCultureElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbPreviewCultureElement;
+        'umb-preview-culture': UmbPreviewCultureElement;
     }
 }

package/dist-cms/apps/preview/apps/preview-culture.element.js

@@ -8,7 +8,6 @@ import { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
 import { css, customElement, html, nothing, repeat, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
 import { UmbLanguageCollectionRepository } from '../../../packages/language/index.js';
-const elementName = 'umb-preview-culture';
 let UmbPreviewCultureElement = class UmbPreviewCultureElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -91,7 +90,7 @@ __decorate([
     state()
 ], UmbPreviewCultureElement.prototype, "_cultures", void 0);
 UmbPreviewCultureElement = __decorate([
-    customElement(elementName)
+    customElement('umb-preview-culture')
 ], UmbPreviewCultureElement);
 export { UmbPreviewCultureElement };
 export { UmbPreviewCultureElement as element };

package/dist-cms/apps/preview/apps/preview-device.element.d.ts

@@ -9,7 +9,6 @@ export interface UmbPreviewDevice {
         width: string;
     };
 }
-declare const elementName = "umb-preview-device";
 export declare class UmbPreviewDeviceElement extends UmbLitElement {
     #private;
     device: UmbPreviewDevice;
@@ -20,6 +19,6 @@ export declare class UmbPreviewDeviceElement extends UmbLitElement {
 export { UmbPreviewDeviceElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbPreviewDeviceElement;
+        'umb-preview-device': UmbPreviewDeviceElement;
     }
 }

package/dist-cms/apps/preview/apps/preview-device.element.js

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
 import { css, customElement, html, property, repeat } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
-const elementName = 'umb-preview-device';
 let UmbPreviewDeviceElement = class UmbPreviewDeviceElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -130,7 +129,7 @@ __decorate([
     property({ attribute: false, type: Object })
 ], UmbPreviewDeviceElement.prototype, "device", void 0);
 UmbPreviewDeviceElement = __decorate([
-    customElement(elementName)
+    customElement('umb-preview-device')
 ], UmbPreviewDeviceElement);
 export { UmbPreviewDeviceElement };
 export { UmbPreviewDeviceElement as element };

package/dist-cms/apps/preview/apps/preview-exit.element.d.ts

@@ -1,5 +1,4 @@
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
-declare const elementName = "umb-preview-exit";
 export declare class UmbPreviewExitElement extends UmbLitElement {
     #private;
     render(): import("lit-html").TemplateResult<1>;
@@ -8,6 +7,6 @@ export declare class UmbPreviewExitElement extends UmbLitElement {
 export { UmbPreviewExitElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbPreviewExitElement;
+        'umb-preview-exit': UmbPreviewExitElement;
     }
 }

package/dist-cms/apps/preview/apps/preview-exit.element.js

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
 import { css, customElement, html } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
-const elementName = 'umb-preview-exit';
 let UmbPreviewExitElement = class UmbPreviewExitElement extends UmbLitElement {
     async #onClick() {
         const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
@@ -42,7 +41,7 @@ let UmbPreviewExitElement = class UmbPreviewExitElement extends UmbLitElement {
     ]; }
 };
 UmbPreviewExitElement = __decorate([
-    customElement(elementName)
+    customElement('umb-preview-exit')
 ], UmbPreviewExitElement);
 export { UmbPreviewExitElement };
 export { UmbPreviewExitElement as element };

package/dist-cms/apps/preview/apps/preview-open-website.element.d.ts

@@ -1,5 +1,4 @@
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
-declare const elementName = "umb-preview-open-website";
 export declare class UmbPreviewOpenWebsiteElement extends UmbLitElement {
     #private;
     render(): import("lit-html").TemplateResult<1>;
@@ -8,6 +7,6 @@ export declare class UmbPreviewOpenWebsiteElement extends UmbLitElement {
 export { UmbPreviewOpenWebsiteElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbPreviewOpenWebsiteElement;
+        'umb-preview-open-website': UmbPreviewOpenWebsiteElement;
     }
 }

package/dist-cms/apps/preview/apps/preview-open-website.element.js

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
 import { css, customElement, html } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
-const elementName = 'umb-preview-open-website';
 let UmbPreviewOpenWebsiteElement = class UmbPreviewOpenWebsiteElement extends UmbLitElement {
     async #onClick() {
         const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
@@ -42,7 +41,7 @@ let UmbPreviewOpenWebsiteElement = class UmbPreviewOpenWebsiteElement extends Um
     ]; }
 };
 UmbPreviewOpenWebsiteElement = __decorate([
-    customElement(elementName)
+    customElement('umb-preview-open-website')
 ], UmbPreviewOpenWebsiteElement);
 export { UmbPreviewOpenWebsiteElement };
 export { UmbPreviewOpenWebsiteElement as element };

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

@@ -1,6 +1,5 @@
 import { nothing } from '../../external/lit/index.js';
 import { UmbLitElement } from '../../packages/core/lit-element/index.js';
-declare const elementName = "umb-preview";
 /**
  * @element umb-preview
  */
@@ -17,6 +16,6 @@ export declare class UmbPreviewElement extends UmbLitElement {
 export default UmbPreviewElement;
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbPreviewElement;
+        'umb-preview': UmbPreviewElement;
     }
 }