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

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

@@ -13,6 +13,13 @@ export const manifests = [
         element: () => import('./preview-culture.element.js'),
         weight: 300,
     },
+    {
+        type: 'previewApp',
+        alias: 'Umb.PreviewApps.Segment',
+        name: 'Preview: Segment Switcher',
+        element: () => import('./preview-segment.element.js'),
+        weight: 290,
+    },
     {
         type: 'previewApp',
         alias: 'Umb.PreviewApps.OpenWebsite',

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

@@ -0,0 +1,16 @@
+import { nothing, type PropertyValues } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+export declare class UmbPreviewSegmentElement extends UmbLitElement {
+    #private;
+    private _segment?;
+    private _segments;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbPreviewSegmentElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-preview-segment': UmbPreviewSegmentElement;
+    }
+}

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

@@ -0,0 +1,96 @@
+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 '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbSegmentCollectionRepository } from '@umbraco-cms/backoffice/segment';
+let UmbPreviewSegmentElement = class UmbPreviewSegmentElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.#segmentRepository = new UmbSegmentCollectionRepository(this);
+        this._segments = [];
+    }
+    #segmentRepository;
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.#loadSegments();
+    }
+    async #loadSegments() {
+        const { data } = await this.#segmentRepository.requestCollection({ skip: 0, take: 100 });
+        this._segments = data?.items ?? [];
+        const searchParams = new URLSearchParams(window.location.search);
+        const segment = searchParams.get('segment');
+        if (segment && segment !== this._segment?.unique) {
+            this._segment = this._segments.find((c) => c.unique === segment);
+        }
+    }
+    async #onClick(segment) {
+        if (this._segment === segment)
+            return;
+        this._segment = segment;
+        const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
+        previewContext?.updateIFrame({ segment: segment?.unique });
+    }
+    render() {
+        if (this._segments.length <= 1)
+            return nothing;
+        return html `
+			<uui-button look="primary" popovertarget="segments-popover">
+				<div>
+					<uui-icon name="icon-filter"></uui-icon>
+					<span>${this._segment?.name ?? 'Segments'}</span>
+				</div>
+			</uui-button>
+			<uui-popover-container id="segments-popover" placement="top-end">
+				<umb-popover-layout>
+					<uui-menu-item label="Default" ?active=${!this._segment} @click=${() => this.#onClick()}></uui-menu-item>
+					${repeat(this._segments, (item) => item.unique, (item) => html `
+							<uui-menu-item
+								label=${item.name}
+								?active=${item.unique === this._segment?.unique}
+								@click=${() => this.#onClick(item)}>
+							</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()
+], UmbPreviewSegmentElement.prototype, "_segment", void 0);
+__decorate([
+    state()
+], UmbPreviewSegmentElement.prototype, "_segments", void 0);
+UmbPreviewSegmentElement = __decorate([
+    customElement('umb-preview-segment')
+], UmbPreviewSegmentElement);
+export { UmbPreviewSegmentElement };
+export { UmbPreviewSegmentElement as element };

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

@@ -1,6 +1,13 @@
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+interface UmbPreviewIframeArgs {
+    className?: string;
+    culture?: string;
+    height?: string;
+    segment?: string;
+    width?: string;
+}
 export declare class UmbPreviewContext extends UmbContextBase {
     #private;
     readonly iframeReady: import("rxjs").Observable<boolean>;
@@ -15,11 +22,7 @@ export declare class UmbPreviewContext extends UmbContextBase {
     reloadIFrame(iframe: HTMLIFrameElement): void;
     restartSession(): Promise<void>;
     startSession(): void;
-    updateIFrame(args?: {
-        culture?: string;
-        className?: string;
-        height?: string;
-        width?: string;
-    }): Promise<void>;
+    updateIFrame(args?: UmbPreviewIframeArgs): Promise<void>;
 }
 export declare const UMB_PREVIEW_CONTEXT: UmbContextToken<UmbPreviewContext, UmbPreviewContext>;
+export {};

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

@@ -6,10 +6,11 @@ import { UmbDocumentPreviewRepository } from '@umbraco-cms/backoffice/document';
 import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 const UMB_LOCALSTORAGE_SESSION_KEY = 'umb:previewSessions';
 export class UmbPreviewContext extends UmbContextBase {
+    #unique;
     #culture;
+    #segment;
     #serverUrl;
     #webSocket;
-    #unique;
     #iframeReady;
     #previewUrl;
     #documentPreviewRepository;
@@ -21,11 +22,13 @@ export class UmbPreviewContext extends UmbContextBase {
         this.#previewUrl = new UmbStringState(undefined);
         this.previewUrl = this.#previewUrl.asObservable();
         this.#documentPreviewRepository = new UmbDocumentPreviewRepository(this);
+        this.#currentArgs = {};
         this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
             this.#serverUrl = instance?.getServerUrl() ?? '';
             const params = new URLSearchParams(window.location.search);
-            this.#culture = params.get('culture');
             this.#unique = params.get('id');
+            this.#culture = params.get('culture');
+            this.#segment = params.get('segment');
             if (!this.#unique) {
                 console.error('No unique ID found in query string.');
                 return;
@@ -62,14 +65,38 @@ export class UmbPreviewContext extends UmbContextBase {
     }
     #setPreviewUrl(args) {
         const host = args?.serverUrl || this.#serverUrl;
-        const path = args?.unique || this.#unique;
-        const params = new URLSearchParams();
+        const unique = args?.unique || this.#unique;
+        if (!unique) {
+            throw new Error('No unique ID found in query string.');
+        }
+        const url = new URL(unique, host);
+        const params = new URLSearchParams(url.search);
         const culture = args?.culture || this.#culture;
-        if (culture)
-            params.set('culture', culture);
-        if (args?.rnd)
-            params.set('rnd', args.rnd.toString());
-        this.#previewUrl.setValue(`${host}/${path}?${params}`);
+        const segment = args?.segment || this.#segment;
+        const cultureParam = 'culture';
+        const rndParam = 'rnd';
+        const segmentParam = 'segment';
+        if (culture) {
+            params.set(cultureParam, culture);
+        }
+        else {
+            params.delete(cultureParam);
+        }
+        if (args?.rnd) {
+            params.set(rndParam, args.rnd.toString());
+        }
+        else {
+            params.delete(rndParam);
+        }
+        if (segment) {
+            params.set(segmentParam, segment);
+        }
+        else {
+            params.delete(segmentParam);
+        }
+        const previewUrl = new URL(url.pathname + '?' + params.toString(), host);
+        const previewUrlString = previewUrl.toString();
+        this.#previewUrl.setValue(previewUrlString);
     }
     #setSessionCount(sessions) {
         localStorage.setItem(UMB_LOCALSTORAGE_SESSION_KEY, sessions.toString());
@@ -137,9 +164,9 @@ export class UmbPreviewContext extends UmbContextBase {
         sessions++;
         this.#setSessionCount(sessions);
     }
+    #currentArgs;
     async updateIFrame(args) {
-        if (!args)
-            return;
+        const mergedArgs = { ...this.#currentArgs, ...args };
         const wrapper = this.getIFrameWrapper();
         if (!wrapper)
             return;
@@ -156,20 +183,30 @@ export class UmbPreviewContext extends UmbContextBase {
         };
         window.addEventListener('resize', scaleIFrame);
         wrapper.addEventListener('transitionend', scaleIFrame);
-        if (args.culture) {
-            this.#iframeReady.setValue(false);
-            const params = new URLSearchParams(window.location.search);
-            params.set('culture', args.culture);
-            const newRelativePathQuery = window.location.pathname + '?' + params.toString();
-            history.pushState(null, '', newRelativePathQuery);
-            this.#setPreviewUrl({ culture: args.culture });
+        this.#iframeReady.setValue(false);
+        const params = new URLSearchParams(window.location.search);
+        if (mergedArgs.culture) {
+            params.set('culture', mergedArgs.culture);
+        }
+        else {
+            params.delete('culture');
+        }
+        if (mergedArgs.segment) {
+            params.set('segment', mergedArgs.segment);
+        }
+        else {
+            params.delete('segment');
         }
-        if (args.className)
-            wrapper.className = args.className;
-        if (args.height)
-            wrapper.style.height = args.height;
-        if (args.width)
-            wrapper.style.width = args.width;
+        const newRelativePathQuery = window.location.pathname + '?' + params.toString();
+        history.pushState(null, '', newRelativePathQuery);
+        this.#currentArgs = mergedArgs;
+        this.#setPreviewUrl({ culture: mergedArgs.culture, segment: mergedArgs.segment });
+        if (mergedArgs.className)
+            wrapper.className = mergedArgs.className;
+        if (mergedArgs.height)
+            wrapper.style.height = mergedArgs.height;
+        if (mergedArgs.width)
+            wrapper.style.width = mergedArgs.width;
     }
 }
 export const UMB_PREVIEW_CONTEXT = new UmbContextToken('UmbPreviewContext');

package/dist-cms/assets/lang/{da-dk.js → da.js}

@@ -50,8 +50,9 @@ export default {
         unlock: 'Lås op',
         createblueprint: 'Opret indholdsskabelon',
         resendInvite: 'Gensend Invitation',
-        editContent: 'Edit content',
-        chooseWhereToImport: 'Choose where to import',
+        editContent: 'Rediger indhold',
+        chooseWhereToImport: 'Vælg hvor du vil importere',
+        viewActionsFor: (name) => (name ? `Se handlinger for '${name}'` : 'Se handlinger'),
     },
     actionCategories: {
         content: 'Indhold',

package/dist-cms/assets/lang/{da-dk.ts → da.ts}

@@ -62,8 +62,9 @@ export default {
 		unlock: 'Lås op',
 		createblueprint: 'Opret indholdsskabelon',
 		resendInvite: 'Gensend Invitation',
-		editContent: 'Edit content',
-		chooseWhereToImport: 'Choose where to import',
+		editContent: 'Rediger indhold',
+		chooseWhereToImport: 'Vælg hvor du vil importere',
+		viewActionsFor: (name) => (name ? `Se handlinger for '${name}'` : 'Se handlinger'),
 	},
 	actionCategories: {
 		content: 'Indhold',