@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc5

package/dist-cms/apps/app/app-auth.controller.js

@@ -3,8 +3,10 @@ import { UmbControllerBase } from '../../libs/class-api/index.js';
 import { firstValueFrom } from '../../external/rxjs/index.js';
 import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT } from '../../packages/core/modal/index.js';
+import { setStoredPath } from '../../packages/core/utils/index.js';
 export class UmbAppAuthController extends UmbControllerBase {
     #authContext;
+    #isFirstCheck = true;
     constructor(host) {
         super(host);
         this.consumeContext(UMB_AUTH_CONTEXT, (context) => {
@@ -25,7 +27,19 @@ export class UmbAppAuthController extends UmbControllerBase {
         }
         const isAuthorized = this.#authContext.getIsAuthorized();
         if (isAuthorized) {
-            return true;
+            // If this is the first time we are checking the authorization state (i.e. on first load), we need to make sure
+            // that the token is still valid. If it is not, we need to start the authorization flow.
+            // If the token is still valid, we can return true.
+            if (this.#isFirstCheck) {
+                this.#isFirstCheck = false;
+                const isValid = await this.#authContext.validateToken();
+                if (isValid) {
+                    return true;
+                }
+            }
+            else {
+                return true;
+            }
         }
         // Make a request to the auth server to start the auth flow
         return this.makeAuthorizationRequest();
@@ -38,6 +52,13 @@ export class UmbAppAuthController extends UmbControllerBase {
         if (!this.#authContext) {
             throw new Error('[Fatal] Auth context is not available');
         }
+        // Save the current state
+        let currentUrl = window.location.href;
+        const searchParams = new URLSearchParams(window.location.search);
+        if (searchParams.has('returnPath')) {
+            currentUrl = decodeURIComponent(searchParams.get('returnPath') || currentUrl);
+        }
+        setStoredPath(currentUrl);
         // Figure out which providers are available
         const availableProviders = await firstValueFrom(this.#authContext.getAuthProviders(umbExtensionsRegistry));
         if (availableProviders.length === 0) {

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

@@ -18,6 +18,7 @@ import { UmbContextDebugController } from '../../packages/core/debug/index.js';
 import { UmbBundleExtensionInitializer, UmbServerExtensionRegistrator } from '../../libs/extension-api/index.js';
 import { UmbAppEntryPointExtensionInitializer, umbExtensionsRegistry, } from '../../packages/core/extension-registry/index.js';
 import { filter, first, firstValueFrom } from '../../external/rxjs/index.js';
+import { hasOwnOpener, retrieveStoredPath } from '../../packages/core/utils/index.js';
 let UmbAppElement = class UmbAppElement extends UmbLitElement {
     /**
      * The base URL of the configured Umbraco server.
@@ -59,20 +60,41 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
                 path: 'oauth_complete',
                 component: () => import('./app-error.element.js'),
                 setup: (component) => {
+                    if (!this.#authContext) {
+                        throw new Error('[Fatal] Auth context is not available');
+                    }
                     const searchParams = new URLSearchParams(window.location.search);
                     const hasCode = searchParams.has('code');
                     component.hideBackButton = true;
                     component.errorHeadline = this.localize.term('general_login');
-                    component.errorMessage = hasCode
-                        ? this.localize.term('errors_externalLoginSuccess')
-                        : this.localize.term('errors_externalLoginFailed');
-                    // Complete the authorization request
-                    this.#authContext?.completeAuthorizationRequest().finally(() => {
-                        // If we don't have an opener, redirect to the root
-                        if (!window.opener) {
-                            history.replaceState(null, '', '');
-                        }
-                    });
+                    // If there is an opener, we are in a popup window, and we should show a different message
+                    // than if we are in the main window. If we are in the main window, we should redirect to the root.
+                    // The authorization request will be completed in the active window (main or popup) and the authorization signal will be sent.
+                    // If we are in a popup window, the storage event in UmbAuthContext will catch the signal and close the window.
+                    // If we are in the main window, the signal will be caught right here and the user will be redirected to the root.
+                    if (hasOwnOpener(this.backofficePath)) {
+                        component.errorMessage = hasCode
+                            ? this.localize.term('errors_externalLoginSuccess')
+                            : this.localize.term('errors_externalLoginFailed');
+                    }
+                    else {
+                        component.errorMessage = hasCode
+                            ? this.localize.term('errors_externalLoginRedirectSuccess')
+                            : this.localize.term('errors_externalLoginFailed');
+                        this.observe(this.#authContext.authorizationSignal, () => {
+                            // Redirect to the saved state or root
+                            const url = retrieveStoredPath();
+                            const isBackofficePath = url?.pathname.startsWith(this.backofficePath) ?? true;
+                            if (isBackofficePath) {
+                                history.replaceState(null, '', url?.toString() ?? '');
+                            }
+                            else {
+                                window.location.href = url?.toString() ?? this.backofficePath;
+                            }
+                        });
+                    }
+                    // Complete the authorization request, which will send the authorization signal
+                    this.#authContext.completeAuthorizationRequest();
                 },
             },
             {
@@ -80,6 +102,11 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
                 component: () => import('../upgrader/upgrader.element.js'),
                 guards: [this.#isAuthorizedGuard()],
             },
+            {
+                path: 'preview',
+                component: () => import('../preview/preview.element.js'),
+                guards: [this.#isAuthorizedGuard()],
+            },
             {
                 path: 'logout',
                 resolve: () => {
@@ -122,9 +149,11 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
         await firstValueFrom(initializer.loaded);
         // Try to initialise the auth flow and get the runtime status
         try {
-            // If the runtime level is "install" we should clear any cached tokens
+            // If the runtime level is "install" or ?status=false is set, we should clear any cached tokens
             // else we should try and set the auth status
-            if (this.#serverConnection.getStatus() === RuntimeLevelModel.INSTALL) {
+            const searchParams = new URLSearchParams(window.location.search);
+            if ((searchParams.has('status') && searchParams.get('status') === 'false') ||
+                this.#serverConnection.getStatus() === RuntimeLevelModel.INSTALL) {
                 await this.#authContext.clearTokenStorage();
             }
             else {
@@ -162,6 +191,7 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
         // Instruct all requests to use the auth flow to get and use the access_token for all subsequent requests
         OpenAPI.TOKEN = () => this.#authContext.getLatestToken();
         OpenAPI.WITH_CREDENTIALS = true;
+        OpenAPI.ENCODE_PATH = (path) => path;
     }
     #redirect() {
         const pathname = pathWithoutBasePath({ start: true, end: false });

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

@@ -6,6 +6,7 @@ import { UmbContextBase } from '../../libs/class-api/index.js';
 import { UmbExtensionsManifestInitializer } from '../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
 import { UMB_AUTH_CONTEXT } from '../../packages/core/auth/index.js';
+import { UMB_CURRENT_USER_CONTEXT } from '../../packages/user/current-user/index.js';
 export class UmbBackofficeContext extends UmbContextBase {
     #activeSectionAlias;
     // TODO: We need a class array state:
@@ -20,9 +21,6 @@ export class UmbBackofficeContext extends UmbContextBase {
         this.allowedSections = this.#allowedSections.asObservable();
         this.#verison = new UmbStringState(undefined);
         this.version = this.#verison.asObservable();
-        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'section', null, (sections) => {
-            this.#allowedSections.setValue([...sections]);
-        });
         // TODO: We need to ensure this request is called every time the user logs in, but this should be done somewhere across the app and not here [JOV]
         this.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
             this.observe(authContext.isAuthorized, (isAuthorized) => {
@@ -31,6 +29,17 @@ 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;
+            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/backoffice.element.js

@@ -23,6 +23,7 @@ const CORE_PACKAGES = [
     import('../../packages/media/umbraco-package.js'),
     import('../../packages/members/umbraco-package.js'),
     import('../../packages/models-builder/umbraco-package.js'),
+    import('../../packages/multi-url-picker/umbraco-package.js'),
     import('../../packages/packages/umbraco-package.js'),
     import('../../packages/property-editors/umbraco-package.js'),
     import('../../packages/relations/umbraco-package.js'),

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

@@ -39,6 +39,7 @@ let UmbBackofficeHeaderLogoElement = class UmbBackofficeHeaderLogoElement extend
         UmbTextStyles,
         css `
 			#logo {
+				display: var(--umb-header-logo-display, inline);
 				--uui-button-padding-top-factor: 1;
 				--uui-button-padding-bottom-factor: 0.5;
 				margin-right: var(--uui-size-space-2);
@@ -56,6 +57,7 @@ let UmbBackofficeHeaderLogoElement = class UmbBackofficeHeaderLogoElement extend
 				flex-direction: column;
 				align-items: center;
 				gap: var(--uui-size-space-3);
+				min-width: var(--uui-size-100);
 			}
 		`,
     ]; }

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

@@ -23,7 +23,7 @@ let UmbBackofficeHeaderElement = class UmbBackofficeHeaderElement extends UmbLit
 			}
 
 			#appHeader {
-				background-color: var(--uui-color-header-surface);
+				background-color: var(--umb-header-background-color, var(--uui-color-header-surface));
 				display: flex;
 				align-items: center;
 				justify-content: space-between;

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

@@ -61,21 +61,6 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
                 };
             }
         });
-        if (this._sections.length > 0) {
-            const fallbackSectionPath = UMB_SECTION_PATH_PATTERN.generateLocal({
-                sectionName: this._sections[0].manifest.meta.pathname,
-            });
-            this._routes.push({
-                alias: '__redirect',
-                path: '/',
-                redirectTo: fallbackSectionPath,
-            });
-            this._routes.push({
-                alias: '__redirect',
-                path: '/section/',
-                redirectTo: fallbackSectionPath,
-            });
-        }
         this.requestUpdate('_routes', oldValue);
     }
     _provideSectionContext(sectionManifest) {

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

@@ -0,0 +1,2 @@
+import type { ManifestPreviewAppProvider } from '../../../packages/core/extension-registry/index.js';
+export declare const manifests: Array<ManifestPreviewAppProvider>;

package/dist-cms/apps/preview/apps/manifests.js

@@ -0,0 +1,30 @@
+export const manifests = [
+    {
+        type: 'previewApp',
+        alias: 'Umb.PreviewApps.Device',
+        name: 'Preview: Device Switcher',
+        element: () => import('./preview-device.element.js'),
+        weight: 400,
+    },
+    {
+        type: 'previewApp',
+        alias: 'Umb.PreviewApps.Culture',
+        name: 'Preview: Culture Switcher',
+        element: () => import('./preview-culture.element.js'),
+        weight: 300,
+    },
+    {
+        type: 'previewApp',
+        alias: 'Umb.PreviewApps.OpenWebsite',
+        name: 'Preview: Open Website Button',
+        element: () => import('./preview-open-website.element.js'),
+        weight: 200,
+    },
+    {
+        type: 'previewApp',
+        alias: 'Umb.PreviewApps.Exit',
+        name: 'Preview: Exit Button',
+        element: () => import('./preview-exit.element.js'),
+        weight: 100,
+    },
+];

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

@@ -0,0 +1,17 @@
+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?;
+    private _cultures;
+    connectedCallback(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export { UmbPreviewCultureElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbPreviewCultureElement;
+    }
+}

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

@@ -0,0 +1,97 @@
+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 { 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);
+        this.#languageRepository = new UmbLanguageCollectionRepository(this);
+        this._cultures = [];
+    }
+    #languageRepository;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#getCultures();
+    }
+    async #getCultures() {
+        const { data: langauges } = await this.#languageRepository.requestCollection({ skip: 0, take: 100 });
+        this._cultures = langauges?.items ?? [];
+        const searchParams = new URLSearchParams(window.location.search);
+        const culture = searchParams.get('culture');
+        if (culture && culture !== this._culture?.unique) {
+            this._culture = this._cultures.find((c) => c.unique === culture);
+        }
+    }
+    async #onClick(culture) {
+        if (this._culture === culture)
+            return;
+        this._culture = culture;
+        const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
+        previewContext.updateIFrame({ culture: culture.unique });
+    }
+    render() {
+        if (this._cultures.length <= 1)
+            return nothing;
+        return html `
+			<uui-button look="primary" popovertarget="cultures-popover">
+				<div>
+					<uui-icon name="icon-globe"></uui-icon>
+					<span>${this._culture?.name ?? this.localize.term('treeHeaders_languages')}</span>
+				</div>
+			</uui-button>
+			<uui-popover-container id="cultures-popover" placement="top-end">
+				<umb-popover-layout>
+					${repeat(this._cultures, (item) => item.unique, (item) => html `
+							<uui-menu-item
+								label=${item.name}
+								?active=${item.unique === this._culture?.unique}
+								@click=${() => this.#onClick(item)}>
+								<uui-icon slot="icon" name="icon-globe"></uui-icon>
+							</uui-menu-item>
+						`)}
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				border-left: 1px solid var(--uui-color-header-contrast);
+				--uui-button-font-weight: 400;
+				--uui-button-padding-left-factor: 3;
+				--uui-button-padding-right-factor: 3;
+			}
+
+			uui-button > div {
+				display: flex;
+				align-items: center;
+				gap: 5px;
+			}
+
+			umb-popover-layout {
+				--uui-color-surface: var(--uui-color-header-surface);
+				--uui-color-border: var(--uui-color-header-surface);
+				color: var(--uui-color-header-contrast);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbPreviewCultureElement.prototype, "_culture", void 0);
+__decorate([
+    state()
+], UmbPreviewCultureElement.prototype, "_cultures", void 0);
+UmbPreviewCultureElement = __decorate([
+    customElement(elementName)
+], UmbPreviewCultureElement);
+export { UmbPreviewCultureElement };
+export { UmbPreviewCultureElement as element };

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

@@ -0,0 +1,25 @@
+import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+export interface UmbPreviewDevice {
+    alias: string;
+    label: string;
+    css: string;
+    icon: string;
+    dimensions: {
+        height: string;
+        width: string;
+    };
+}
+declare const elementName = "umb-preview-device";
+export declare class UmbPreviewDeviceElement extends UmbLitElement {
+    #private;
+    device: UmbPreviewDevice;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export { UmbPreviewDeviceElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbPreviewDeviceElement;
+    }
+}

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

@@ -0,0 +1,136 @@
+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 { 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);
+        this.#devices = [
+            {
+                alias: 'fullsize',
+                label: 'Fit browser',
+                css: 'fullsize',
+                icon: 'icon-application-window-alt',
+                dimensions: { height: '100%', width: '100%' },
+            },
+            {
+                alias: 'desktop',
+                label: 'Desktop',
+                css: 'desktop shadow',
+                icon: 'icon-display',
+                dimensions: { height: '1080px', width: '1920px' },
+            },
+            {
+                alias: 'laptop',
+                label: 'Laptop',
+                css: 'laptop shadow',
+                icon: 'icon-laptop',
+                dimensions: { height: '768px', width: '1366px' },
+            },
+            {
+                alias: 'ipad-portrait',
+                label: 'Tablet portrait',
+                css: 'ipad-portrait shadow',
+                icon: 'icon-ipad',
+                dimensions: { height: '929px', width: '769px' },
+            },
+            {
+                alias: 'ipad-landscape',
+                label: 'Tablet landscape',
+                css: 'ipad-landscape shadow flip',
+                icon: 'icon-ipad',
+                dimensions: { height: '675px', width: '1024px' },
+            },
+            {
+                alias: 'smartphone-portrait',
+                label: 'Smartphone portrait',
+                css: 'smartphone-portrait shadow',
+                icon: 'icon-iphone',
+                dimensions: { height: '640px', width: '360px' },
+            },
+            {
+                alias: 'smartphone-landscape',
+                label: 'Smartphone landscape',
+                css: 'smartphone-landscape shadow flip',
+                icon: 'icon-iphone',
+                dimensions: { height: '360px', width: '640px' },
+            },
+        ];
+        this.device = this.#devices[0];
+    }
+    #devices;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#changeDevice(this.device);
+    }
+    async #changeDevice(device) {
+        if (device === this.device)
+            return;
+        this.device = device;
+        const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
+        previewContext?.updateIFrame({
+            className: device.css,
+            height: device.dimensions.height,
+            width: device.dimensions.width,
+        });
+    }
+    render() {
+        return html `
+			<uui-button look="primary" popovertarget="devices-popover">
+				<div>
+					<uui-icon name=${this.device.icon} class=${this.device.css.includes('flip') ? 'flip' : ''}></uui-icon>
+					<span>${this.device.label}</span>
+				</div>
+			</uui-button>
+			<uui-popover-container id="devices-popover" placement="top-end">
+				<umb-popover-layout>
+					${repeat(this.#devices, (item) => item.alias, (item) => html `
+							<uui-menu-item
+								label=${item.label}
+								?active=${item === this.device}
+								@click=${() => this.#changeDevice(item)}>
+								<uui-icon slot="icon" name=${item.icon} class=${item.css.includes('flip') ? 'flip' : ''}></uui-icon>
+							</uui-menu-item>
+						`)}
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
+    }
+    static { this.styles = [
+        css `
+		:host {
+				display: flex;
+				border-left: 1px solid var(--uui-color-header-contrast);
+				--uui-button-font-weight: 400;
+				--uui-button-padding-left-factor: 3;
+				--uui-button-padding-right-factor: 3;
+			}
+
+			uui-button > div {
+				display: flex;
+				align-items: center;
+				gap: 5px;
+			}
+
+			umb-popover-layout {
+				--uui-color-surface: var(--uui-color-header-surface);
+				--uui-color-border: var(--uui-color-header-surface);
+				color: var(--uui-color-header-contrast);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ attribute: false, type: Object })
+], UmbPreviewDeviceElement.prototype, "device", void 0);
+UmbPreviewDeviceElement = __decorate([
+    customElement(elementName)
+], UmbPreviewDeviceElement);
+export { UmbPreviewDeviceElement };
+export { UmbPreviewDeviceElement as element };

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

@@ -0,0 +1,13 @@
+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>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export { UmbPreviewExitElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbPreviewExitElement;
+    }
+}

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

@@ -0,0 +1,48 @@
+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 { 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);
+        previewContext.exitPreview(0);
+    }
+    render() {
+        return html `
+			<uui-button look="primary" @click=${this.#onClick}>
+				<div>
+					<uui-icon name="icon-power"></uui-icon>
+					<span>${this.localize.term('preview_endLabel')}</span>
+				</div>
+			</uui-button>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				border-left: 1px solid var(--uui-color-header-contrast);
+				--uui-button-font-weight: 400;
+				--uui-button-padding-left-factor: 3;
+				--uui-button-padding-right-factor: 3;
+			}
+
+			uui-button > div {
+				display: flex;
+				align-items: center;
+				gap: 5px;
+			}
+		`,
+    ]; }
+};
+UmbPreviewExitElement = __decorate([
+    customElement(elementName)
+], UmbPreviewExitElement);
+export { UmbPreviewExitElement };
+export { UmbPreviewExitElement as element };

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

@@ -0,0 +1,13 @@
+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>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export { UmbPreviewOpenWebsiteElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbPreviewOpenWebsiteElement;
+    }
+}