@jumoo/usync 17.5.2 → 17.5.3-prerelease.16

package/dist/api/client.gen.js

@@ -1,4 +1,3 @@
 // This file is auto-generated by @hey-api/openapi-ts
-import { createClientConfig } from '../hey-api';
 import { createClient, createConfig } from './client';
-export const client = createClient(createClientConfig(createConfig({ baseUrl: 'http://localhost:16903', throwOnError: true })));
+export const client = createClient(createConfig({ baseUrl: 'http://localhost:16903', throwOnError: true }));

package/dist/api/index.d.ts

@@ -1,3 +1,3 @@
 export { client, type CreateClientConfig } from './client.gen';
 export { ActionsService, FoldersService, MigrationsService, type Options, SettingsService } from './sdk.gen';
-export { ChangeDetailType, ChangeType, type CheckLegacyData, type CheckLegacyErrors, type CheckLegacyResponse, type CheckLegacyResponses, type ClientOptions, type CopyLegacyData, type CopyLegacyErrors, type CopyLegacyResponse, type CopyLegacyResponses, type DownloadData, type DownloadErrors, type DownloadResponse, type DownloadResponses, type GetActionsBySetData, type GetActionsBySetErrors, type GetActionsBySetResponse, type GetActionsBySetResponses, type GetActionsData, type GetActionsErrors, type GetActionsResponse, type GetActionsResponses, type GetAddOnsData, type GetAddOnsErrors, type GetAddonSplashData, type GetAddonSplashErrors, type GetAddonSplashResponse, type GetAddonSplashResponses, type GetAddOnsResponse, type GetAddOnsResponses, type GetHandlerSetSettingsData, type GetHandlerSetSettingsErrors, type GetHandlerSetSettingsResponse, type GetHandlerSetSettingsResponses, type GetSetsData, type GetSetsErrors, type GetSetsResponse, type GetSetsResponses, type GetSettingsData, type GetSettingsErrors, type GetSettingsResponse, type GetSettingsResponses, type GetSyncFileInfoData, type GetSyncFileInfoErrors, type GetSyncFileInfoResponse, type GetSyncFileInfoResponses, type HandlerSettings, HandlerStatus, type IgnoreLegacyData, type IgnoreLegacyErrors, type IgnoreLegacyResponse, type IgnoreLegacyResponses, type ImportSingleData, type ImportSingleErrors, type ImportSingleResponse, type ImportSingleResponses, type MergeExportFolderData, type MergeExportFolderErrors, type MergeExportFolderResponse, type MergeExportFolderResponses, type PerformActionData, type PerformActionErrors, type PerformActionRequest, type PerformActionResponse, type PerformActionResponse2, type PerformActionResponses, type ProcessUploadData, type ProcessUploadErrors, type ProcessUploadResponse, type ProcessUploadResponses, type RunningData, type RunningErrors, type RunningResponse, type RunningResponses, type StatusData, type StatusErrors, type StatusResponse, type StatusResponses, type SyncActionButton, type SyncActionGroup, type SyncFileVersionCheckResult, SyncFolderMode, type SyncHandlerSummary, type SyncLegacyCheckResponse, type SyncOperationStatusResponse, SyncProcessingMode, type SyncRunningOperationResponse, type SyncSelectableSet, type UploadImportResult, type USyncActionView, type USyncAddonInfo, type USyncAddonSplash, type USyncChange, type USyncHandlerSetSettings, type USyncOptions, type USyncSettings } from './types.gen';
+export { ChangeDetailType, ChangeType, type CheckLegacyData, type CheckLegacyErrors, type CheckLegacyResponse, type CheckLegacyResponses, type ClientOptions, type CopyLegacyData, type CopyLegacyErrors, type CopyLegacyResponse, type CopyLegacyResponses, type DownloadData, type DownloadErrors, type DownloadResponse, type DownloadResponses, type GetActionsBySetData, type GetActionsBySetErrors, type GetActionsBySetResponse, type GetActionsBySetResponses, type GetActionsData, type GetActionsErrors, type GetActionsResponse, type GetActionsResponses, type GetAddOnsData, type GetAddOnsErrors, type GetAddonSplashData, type GetAddonSplashErrors, type GetAddonSplashResponse, type GetAddonSplashResponses, type GetAddOnsResponse, type GetAddOnsResponses, type GetHandlerSetSettingsData, type GetHandlerSetSettingsErrors, type GetHandlerSetSettingsResponse, type GetHandlerSetSettingsResponses, type GetPreviewData, type GetPreviewErrors, type GetPreviewResponse, type GetPreviewResponses, type GetSetsData, type GetSetsErrors, type GetSetsResponse, type GetSetsResponses, type GetSettingsData, type GetSettingsErrors, type GetSettingsResponse, type GetSettingsResponses, type GetSyncFileInfoData, type GetSyncFileInfoErrors, type GetSyncFileInfoResponse, type GetSyncFileInfoResponses, type HandlerSettings, HandlerStatus, type IgnoreLegacyData, type IgnoreLegacyErrors, type IgnoreLegacyResponse, type IgnoreLegacyResponses, type ImportSingleData, type ImportSingleErrors, type ImportSingleResponse, type ImportSingleResponses, type MergeExportFolderData, type MergeExportFolderErrors, type MergeExportFolderResponse, type MergeExportFolderResponses, type PerformActionData, type PerformActionErrors, type PerformActionRequest, type PerformActionResponse, type PerformActionResponse2, type PerformActionResponses, type ProcessUploadData, type ProcessUploadErrors, type ProcessUploadResponse, type ProcessUploadResponses, type RunningData, type RunningErrors, type RunningResponse, type RunningResponses, type StatusData, type StatusErrors, type StatusResponse, type StatusResponses, type SyncActionButton, type SyncActionGroup, type SyncFileVersionCheckResult, SyncFolderMode, type SyncHandlerSummary, type SyncItemPreviewResponse, type SyncLegacyCheckResponse, type SyncOperationStatusResponse, SyncProcessingMode, type SyncRunningOperationResponse, type SyncSelectableSet, type UploadImportResult, type USyncActionView, type USyncAddonInfo, type USyncAddonSplash, type USyncChange, type USyncHandlerSetSettings, type USyncOptions, type USyncSettings } from './types.gen';

package/dist/api/sdk.gen.d.ts

@@ -1,5 +1,5 @@
 import type { Client, ClientMeta, Options as Options2, RequestResult, TDataShape } from './client';
-import type { CheckLegacyData, CheckLegacyErrors, CheckLegacyResponses, CopyLegacyData, CopyLegacyErrors, CopyLegacyResponses, DownloadData, DownloadErrors, DownloadResponses, GetActionsBySetData, GetActionsBySetErrors, GetActionsBySetResponses, GetActionsData, GetActionsErrors, GetActionsResponses, GetAddOnsData, GetAddOnsErrors, GetAddonSplashData, GetAddonSplashErrors, GetAddonSplashResponses, GetAddOnsResponses, GetHandlerSetSettingsData, GetHandlerSetSettingsErrors, GetHandlerSetSettingsResponses, GetSetsData, GetSetsErrors, GetSetsResponses, GetSettingsData, GetSettingsErrors, GetSettingsResponses, GetSyncFileInfoData, GetSyncFileInfoErrors, GetSyncFileInfoResponses, IgnoreLegacyData, IgnoreLegacyErrors, IgnoreLegacyResponses, ImportSingleData, ImportSingleErrors, ImportSingleResponses, MergeExportFolderData, MergeExportFolderErrors, MergeExportFolderResponses, PerformActionData, PerformActionErrors, PerformActionResponses, ProcessUploadData, ProcessUploadErrors, ProcessUploadResponses, RunningData, RunningErrors, RunningResponses, StatusData, StatusErrors, StatusResponses } from './types.gen';
+import type { CheckLegacyData, CheckLegacyErrors, CheckLegacyResponses, CopyLegacyData, CopyLegacyErrors, CopyLegacyResponses, DownloadData, DownloadErrors, DownloadResponses, GetActionsBySetData, GetActionsBySetErrors, GetActionsBySetResponses, GetActionsData, GetActionsErrors, GetActionsResponses, GetAddOnsData, GetAddOnsErrors, GetAddonSplashData, GetAddonSplashErrors, GetAddonSplashResponses, GetAddOnsResponses, GetHandlerSetSettingsData, GetHandlerSetSettingsErrors, GetHandlerSetSettingsResponses, GetPreviewData, GetPreviewErrors, GetPreviewResponses, GetSetsData, GetSetsErrors, GetSetsResponses, GetSettingsData, GetSettingsErrors, GetSettingsResponses, GetSyncFileInfoData, GetSyncFileInfoErrors, GetSyncFileInfoResponses, IgnoreLegacyData, IgnoreLegacyErrors, IgnoreLegacyResponses, ImportSingleData, ImportSingleErrors, ImportSingleResponses, MergeExportFolderData, MergeExportFolderErrors, MergeExportFolderResponses, PerformActionData, PerformActionErrors, PerformActionResponses, ProcessUploadData, ProcessUploadErrors, ProcessUploadResponses, RunningData, RunningErrors, RunningResponses, StatusData, StatusErrors, StatusResponses } from './types.gen';
 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean, TResponse = unknown> = Options2<TData, ThrowOnError, TResponse> & {
     /**
      * You can provide a client instance returned by `createClient()` instead of
@@ -23,6 +23,7 @@ export declare class ActionsService {
     static getSyncFileInfo<ThrowOnError extends boolean = true>(options?: Options<GetSyncFileInfoData, ThrowOnError>): RequestResult<GetSyncFileInfoResponses, GetSyncFileInfoErrors, ThrowOnError>;
     static importSingle<ThrowOnError extends boolean = true>(options?: Options<ImportSingleData, ThrowOnError>): RequestResult<ImportSingleResponses, ImportSingleErrors, ThrowOnError>;
     static performAction<ThrowOnError extends boolean = true>(options?: Options<PerformActionData, ThrowOnError>): RequestResult<PerformActionResponses, PerformActionErrors, ThrowOnError>;
+    static getPreview<ThrowOnError extends boolean = true>(options?: Options<GetPreviewData, ThrowOnError>): RequestResult<GetPreviewResponses, GetPreviewErrors, ThrowOnError>;
     static processUpload<ThrowOnError extends boolean = true>(options?: Options<ProcessUploadData, ThrowOnError>): RequestResult<ProcessUploadResponses, ProcessUploadErrors, ThrowOnError>;
     static running<ThrowOnError extends boolean = true>(options?: Options<RunningData, ThrowOnError>): RequestResult<RunningResponses, RunningErrors, ThrowOnError>;
     static status<ThrowOnError extends boolean = true>(options?: Options<StatusData, ThrowOnError>): RequestResult<StatusResponses, StatusErrors, ThrowOnError>;

package/dist/api/sdk.gen.js

@@ -54,6 +54,13 @@ export class ActionsService {
             }
         });
     }
+    static getPreview(options) {
+        return (options?.client ?? client).get({
+            security: [{ scheme: 'bearer', type: 'http' }],
+            url: '/umbraco/usync/api/v1/Preview',
+            ...options
+        });
+    }
     static processUpload(options) {
         return (options?.client ?? client).post({
             security: [{ scheme: 'bearer', type: 'http' }],

package/dist/api/types.gen.d.ts

@@ -96,6 +96,17 @@ export type SyncHandlerSummary = {
     changes: number;
     inError: boolean;
 };
+export type SyncItemPreviewResponse = {
+    key: string;
+    handler: string;
+    itemType: string;
+    entityType: string;
+    isDelete: boolean;
+    success: boolean;
+    message?: string | null;
+    preview?: unknown;
+    details: Array<USyncChange>;
+};
 export type SyncLegacyCheckResponse = {
     hasLegacy: boolean;
     legacyFolder?: string | null;
@@ -331,6 +342,32 @@ export type PerformActionResponses = {
     200: PerformActionResponse;
 };
 export type PerformActionResponse2 = PerformActionResponses[keyof PerformActionResponses];
+export type GetPreviewData = {
+    body?: never;
+    path?: never;
+    query?: {
+        handler?: string;
+        key?: string;
+    };
+    url: '/umbraco/usync/api/v1/Preview';
+};
+export type GetPreviewErrors = {
+    /**
+     * The resource is protected and requires an authentication token
+     */
+    401: unknown;
+    /**
+     * Not Found
+     */
+    404: unknown;
+};
+export type GetPreviewResponses = {
+    /**
+     * OK
+     */
+    200: SyncItemPreviewResponse;
+};
+export type GetPreviewResponse = GetPreviewResponses[keyof GetPreviewResponses];
 export type ProcessUploadData = {
     body?: never;
     path?: never;

package/dist/components/usync-content-preview.d.ts

@@ -0,0 +1,27 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { type PropertyValues, nothing } from '@umbraco-cms/backoffice/external/lit';
+import '@umbraco-cms/backoffice/components';
+import type { SyncItemPreviewResponse } from '../api';
+/**
+ * Shows the current and incoming versions of a content or media item side by
+ * side, laid out the way the backoffice editor shows them, with every value
+ * rendered by its real property editor. Values that change are highlighted.
+ */
+export declare class uSyncContentPreviewElement extends UmbLitElement {
+    #private;
+    preview?: SyncItemPreviewResponse;
+    /** the tab shown on both sides (by name) */
+    private _activeTab?;
+    /** the culture shown on both sides (undefined for invariant items) */
+    private _culture?;
+    private _onlyChanges;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncContentPreviewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-content-preview': uSyncContentPreviewElement;
+    }
+}

package/dist/components/usync-content-preview.js

@@ -0,0 +1,532 @@
+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;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _uSyncContentPreviewElement_instances, _uSyncContentPreviewElement_current, _uSyncContentPreviewElement_incoming, _uSyncContentPreviewElement_type, _uSyncContentPreviewElement_compositions, _uSyncContentPreviewElement_dataTypes, _uSyncContentPreviewElement_cultures, _uSyncContentPreviewElement_renderToolbar, _uSyncContentPreviewElement_renderSide, _uSyncContentPreviewElement_missingMessage, _uSyncContentPreviewElement_renderInfo, _uSyncContentPreviewElement_renderPublished, _uSyncContentPreviewElement_name, _uSyncContentPreviewElement_renderTabButton, _uSyncContentPreviewElement_renderTab, _uSyncContentPreviewElement_renderProperties, _uSyncContentPreviewElement_visibleTabs, _uSyncContentPreviewElement_tabProperties, _uSyncContentPreviewElement_datasetValue, _uSyncContentPreviewElement_value, _uSyncContentPreviewElement_valueStatus;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { classMap, css, customElement, html, nothing, property, repeat, state, } from '@umbraco-cms/backoffice/external/lit';
+import '@umbraco-cms/backoffice/components';
+import { getPreviewModel, } from '../preview/types.js';
+import { buildContentTypeLayout, } from '../utils/preview/content-type-layout.js';
+import { deepEqual } from '../utils/diff/deep-equal.js';
+/**
+ * Shows the current and incoming versions of a content or media item side by
+ * side, laid out the way the backoffice editor shows them, with every value
+ * rendered by its real property editor. Values that change are highlighted.
+ */
+let uSyncContentPreviewElement = class uSyncContentPreviewElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncContentPreviewElement_instances.add(this);
+        this._onlyChanges = false;
+        _uSyncContentPreviewElement_current.set(this, {});
+        _uSyncContentPreviewElement_incoming.set(this, {});
+        _uSyncContentPreviewElement_type.set(this, void 0);
+        _uSyncContentPreviewElement_compositions.set(this, new Map());
+        _uSyncContentPreviewElement_dataTypes.set(this, new Map());
+        _uSyncContentPreviewElement_cultures.set(this, []);
+    }
+    willUpdate(changed) {
+        if (!changed.has('preview') || !this.preview)
+            return;
+        const model = getPreviewModel(this.preview);
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_current, { item: model?.current ?? undefined, info: model?.currentInfo }, "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_incoming, { item: model?.incoming ?? undefined, info: model?.incomingInfo }, "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_type, model?.contentType ?? undefined, "f");
+        const compositions = model?.compositions ?? [];
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_compositions, new Map(compositions.map((c) => [c.id, c])), "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_dataTypes, new Map((model?.dataTypes ?? []).map((d) => [d.id, d])), "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_cultures, [
+            ...new Set([__classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f").item, __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f").item]
+                .flatMap((item) => item?.variants ?? [])
+                .map((v) => v.culture)
+                .filter((c) => !!c)),
+        ].sort(), "f");
+        this._culture = __classPrivateFieldGet(this, _uSyncContentPreviewElement_cultures, "f")[0];
+        this._activeTab = undefined;
+    }
+    render() {
+        if (!this.preview)
+            return nothing;
+        const tabs = __classPrivateFieldGet(this, _uSyncContentPreviewElement_type, "f")
+            ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_visibleTabs).call(this, buildContentTypeLayout(__classPrivateFieldGet(this, _uSyncContentPreviewElement_type, "f"), __classPrivateFieldGet(this, _uSyncContentPreviewElement_compositions, "f")))
+            : [];
+        // until a tab is picked, open on the first one with changes.
+        const active = tabs.find((t) => t.name === this._activeTab) ??
+            tabs.find((t) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_tabProperties).call(this, t).some((p) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_valueStatus).call(this, p.property))) ??
+            tabs[0];
+        return html `
+			<div class="sides">
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderToolbar).call(this)}
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f"), tabs, active)}
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderSide).call(this, 'incoming', __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f"), tabs, active)}
+			</div>
+		`;
+    }
+};
+_uSyncContentPreviewElement_current = new WeakMap();
+_uSyncContentPreviewElement_incoming = new WeakMap();
+_uSyncContentPreviewElement_type = new WeakMap();
+_uSyncContentPreviewElement_compositions = new WeakMap();
+_uSyncContentPreviewElement_dataTypes = new WeakMap();
+_uSyncContentPreviewElement_cultures = new WeakMap();
+_uSyncContentPreviewElement_instances = new WeakSet();
+_uSyncContentPreviewElement_renderToolbar = function _uSyncContentPreviewElement_renderToolbar() {
+    if (__classPrivateFieldGet(this, _uSyncContentPreviewElement_cultures, "f").length < 2 && !(__classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f").item && __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f").item))
+        return nothing;
+    return html `<div class="toolbar">
+			${__classPrivateFieldGet(this, _uSyncContentPreviewElement_cultures, "f").length > 1
+        ? html `<uui-button-group
+							aria-label=${this.localize.termOrDefault('uSync_previewCulture', 'Language')}>
+							${__classPrivateFieldGet(this, _uSyncContentPreviewElement_cultures, "f").map((culture) => html `<uui-button
+										look=${culture === this._culture ? 'primary' : 'secondary'}
+										compact
+										label=${culture}
+										@click=${() => (this._culture = culture)}></uui-button>`)}
+						</uui-button-group>`
+        : nothing}
+			${
+    // there is only something to compare when the item is on both sides.
+    __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f").item && __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f").item
+        ? html `<uui-toggle
+							label=${this.localize.termOrDefault('uSync_previewOnlyChanges', 'Only show changes')}
+							?checked=${this._onlyChanges}
+							@change=${(e) => (this._onlyChanges = e.target.checked)}></uui-toggle>`
+        : nothing}
+		</div>`;
+};
+_uSyncContentPreviewElement_renderSide = function _uSyncContentPreviewElement_renderSide(side, data, tabs, active) {
+    const headline = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)')
+        : this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)');
+    if (!data.item) {
+        return html `<div class="side ${side}">
+				<h4 class="side-headline">${headline}</h4>
+				<uui-box class="info"><p class="empty">${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_missingMessage).call(this, side)}</p></uui-box>
+			</div>`;
+    }
+    return html `
+			<div class="side ${side}">
+				<h4 class="side-headline">${headline}</h4>
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderInfo).call(this, data)}
+				${tabs.length > 1 || (tabs.length === 1 && tabs[0].name)
+        ? html `<uui-tab-group>
+								${tabs.map((tab) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderTabButton).call(this, tab, tab === active))}
+							</uui-tab-group>`
+        : html `<div></div>`}
+				${active
+        ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderTab).call(this, data.item, active)
+        : html `<uui-box>
+								<p class="empty">
+									${this._onlyChanges
+            ? this.localize.termOrDefault('uSync_previewNoValueChanges', 'No values change')
+            : this.localize.termOrDefault('uSync_previewNoProperties', 'No properties')}
+								</p>
+							</uui-box>`}
+			</div>
+		`;
+};
+_uSyncContentPreviewElement_missingMessage = function _uSyncContentPreviewElement_missingMessage(side) {
+    if (side === 'current') {
+        return this.localize.termOrDefault('uSync_previewNotInSite', 'This item does not exist in the site yet');
+    }
+    return this.preview?.isDelete
+        ? this.localize.termOrDefault('uSync_previewDeleted', 'This item will be deleted or renamed by the import')
+        : this.localize.termOrDefault('uSync_previewFailed', 'The incoming item could not be built for the preview');
+};
+_uSyncContentPreviewElement_renderInfo = function _uSyncContentPreviewElement_renderInfo(data) {
+    const item = data.item;
+    const info = data.info;
+    const other = data === __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f") ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f") : __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f");
+    const both = !!other.item;
+    const changed = (field) => {
+        if (!both)
+            return { changed: false };
+        const mine = field === 'name' ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_name).call(this, item) : info?.[field];
+        const theirs = field === 'name' ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_name).call(this, other.item) : other.info?.[field];
+        return { changed: !deepEqual(mine, theirs) };
+    };
+    const icon = 'documentType' in item ? item.documentType.icon : item.mediaType.icon;
+    return html `
+			<uui-box class="info">
+				<div slot="headline" class="headline">
+					<umb-icon name=${icon}></umb-icon>
+					<span class=${classMap(changed('name'))}>${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_name).call(this, item)}</span>
+				</div>
+				<dl class="meta">
+					<dt>${this.localize.termOrDefault('uSync_previewParent', 'Parent')}</dt>
+					<dd>
+						<span class=${classMap(changed('parent'))}
+							>${info?.parent ?? this.localize.termOrDefault('uSync_previewRoot', '(root)')}</span
+						>
+					</dd>
+					${info?.template !== undefined && this.preview?.entityType === 'document'
+        ? html `<dt>
+										${this.localize.termOrDefault('uSync_previewTemplate', 'Template')}
+									</dt>
+									<dd>
+										<span class=${classMap(changed('template'))}
+											>${info?.template ?? '-'}</span
+										>
+									</dd>`
+        : nothing}
+					<dt>${this.localize.termOrDefault('uSync_previewSortOrder', 'Sort order')}</dt>
+					<dd>
+						<span class=${classMap(changed('sortOrder'))}>${info?.sortOrder ?? '-'}</span>
+					</dd>
+					${info?.published.length
+        ? html `<dt>
+										${this.localize.termOrDefault('uSync_previewPublished', 'Published')}
+									</dt>
+									<dd>
+										<span class=${classMap({ tags: true, ...changed('published') })}>
+											${info.published.map((p) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderPublished).call(this, p.culture, p.published))}
+										</span>
+									</dd>`
+        : nothing}
+				</dl>
+				${info?.trashed
+        ? html `<uui-tag color="danger" look="secondary"
+								>${this.localize.termOrDefault('uSync_previewTrashed', 'In the recycle bin')}</uui-tag
+							>`
+        : nothing}
+			</uui-box>
+		`;
+};
+_uSyncContentPreviewElement_renderPublished = function _uSyncContentPreviewElement_renderPublished(culture, published) {
+    const label = published
+        ? this.localize.termOrDefault('uSync_previewPublished', 'Published')
+        : this.localize.termOrDefault('uSync_previewNotPublished', 'Not published');
+    return html `<uui-tag
+			size="s"
+			look=${published ? 'primary' : 'secondary'}
+			color=${published ? 'positive' : 'default'}
+			>${culture ? `${culture}: ` : ''}${label}</uui-tag
+		>`;
+};
+_uSyncContentPreviewElement_name = function _uSyncContentPreviewElement_name(item) {
+    const variant = item.variants.find((v) => (v.culture ?? undefined) === this._culture) ??
+        item.variants[0];
+    return variant?.name ?? '';
+};
+_uSyncContentPreviewElement_renderTabButton = function _uSyncContentPreviewElement_renderTabButton(tab, active) {
+    const changed = __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_tabProperties).call(this, tab).some((p) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_valueStatus).call(this, p.property));
+    const label = tab.name || this.localize.termOrDefault('uSync_previewGenericTab', 'Generic');
+    return html `<uui-tab
+			label=${label}
+			?active=${active}
+			@click=${() => (this._activeTab = tab.name)}>
+			<span class="tab-label">
+				${label} ${changed ? html `<span class="dot changed"></span>` : nothing}
+			</span>
+		</uui-tab>`;
+};
+_uSyncContentPreviewElement_renderTab = function _uSyncContentPreviewElement_renderTab(item, tab) {
+    // inert rather than readonly: editors are shown as an editor would see them,
+    // but nothing in the preview can be changed.
+    return html `
+			<umb-property-dataset .value=${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_datasetValue).call(this, item)} inert>
+				${tab.properties.length ? html `<uui-box>${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderProperties).call(this, tab.properties)}</uui-box>` : nothing}
+				${repeat(tab.groups, (group) => group.name, (group) => html `<uui-box headline=${group.name}
+							>${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderProperties).call(this, group.properties)}</uui-box
+						>`)}
+			</umb-property-dataset>
+		`;
+};
+_uSyncContentPreviewElement_renderProperties = function _uSyncContentPreviewElement_renderProperties(properties) {
+    return repeat(properties, (entry) => entry.property.id, ({ property: p }) => {
+        const dataType = __classPrivateFieldGet(this, _uSyncContentPreviewElement_dataTypes, "f").get(p.dataType.id);
+        const status = __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_valueStatus).call(this, p);
+        return html `<div class="property ${status ?? ''}">
+					${dataType
+            ? html `<umb-property
+									.alias=${p.alias}
+									.label=${p.name}
+									.description=${p.description ?? ''}
+									.propertyEditorUiAlias=${dataType.editorUiAlias}
+									.config=${dataType.values}
+									.appearance=${p.appearance}></umb-property>`
+            : html `<p class="empty">${p.name}</p>`}
+				</div>`;
+    });
+};
+_uSyncContentPreviewElement_visibleTabs = function _uSyncContentPreviewElement_visibleTabs(tabs) {
+    if (!this._onlyChanges)
+        return tabs;
+    const keep = (properties) => properties.filter((p) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_valueStatus).call(this, p.property));
+    return tabs
+        .map((tab) => ({
+        ...tab,
+        properties: keep(tab.properties),
+        groups: tab.groups
+            .map((group) => ({ ...group, properties: keep(group.properties) }))
+            .filter((group) => group.properties.length > 0),
+    }))
+        .filter((tab) => tab.properties.length > 0 || tab.groups.length > 0);
+};
+_uSyncContentPreviewElement_tabProperties = function _uSyncContentPreviewElement_tabProperties(tab) {
+    return [...tab.properties, ...tab.groups.flatMap((g) => g.properties)];
+};
+_uSyncContentPreviewElement_datasetValue = function _uSyncContentPreviewElement_datasetValue(item) {
+    return item.values
+        .filter((v) => !v.segment && (!v.culture || v.culture === this._culture))
+        .map((v) => ({ alias: v.alias, value: v.value }));
+};
+_uSyncContentPreviewElement_value = function _uSyncContentPreviewElement_value(item, p) {
+    const culture = p.variesByCulture ? this._culture : undefined;
+    return item?.values.find((v) => v.alias === p.alias && !v.segment && (v.culture ?? undefined) === culture)?.value;
+};
+_uSyncContentPreviewElement_valueStatus = function _uSyncContentPreviewElement_valueStatus(p) {
+    const current = __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f").item;
+    const incoming = __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f").item;
+    if (!current || !incoming)
+        return undefined;
+    const before = __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_value).call(this, current, p);
+    const after = __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_value).call(this, incoming, p);
+    if (deepEqual(normalise(before), normalise(after)))
+        return undefined;
+    if (isEmpty(before))
+        return 'added';
+    if (isEmpty(after))
+        return 'removed';
+    return 'changed';
+};
+uSyncContentPreviewElement.styles = css `
+		:host {
+			display: block;
+			container-type: inline-size;
+		}
+
+		/* the toolbar shares the headline row with the incoming side, on the right. */
+		.toolbar {
+			grid-column: 2;
+			grid-row: 1;
+			justify-self: end;
+			align-self: center;
+			z-index: 1;
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: var(--uui-size-space-4);
+		}
+
+		/* the two sides share rows (headline, info, tabs, content), so the
+		   tab bars and properties line up even when the info boxes differ. */
+		.sides {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: auto auto auto 1fr;
+			gap: var(--uui-size-space-4) var(--uui-size-space-5);
+		}
+
+		.side {
+			display: grid;
+			grid-row: span 4;
+			grid-template-rows: subgrid;
+			align-items: start;
+			min-width: 0;
+		}
+
+		.side.current {
+			grid-column: 1;
+			grid-row: 1 / span 4;
+		}
+
+		.side.incoming {
+			grid-column: 2;
+			grid-row: 1 / span 4;
+		}
+
+		.side > .info:not(:last-child) {
+			align-self: stretch;
+		}
+
+		@container (max-width: 760px) {
+			.sides {
+				grid-template-columns: 1fr;
+				grid-template-rows: none;
+				row-gap: var(--uui-size-layout-1);
+			}
+
+			.side,
+			.side.current,
+			.side.incoming,
+			.toolbar {
+				grid-column: 1;
+				grid-row: auto;
+			}
+
+			.side {
+				display: flex;
+				flex-direction: column;
+				align-items: stretch;
+				gap: var(--uui-size-space-4);
+			}
+
+			.side > .side-headline {
+				align-self: auto;
+			}
+		}
+
+		umb-property-dataset {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+			min-width: 0;
+		}
+
+		.side-headline {
+			align-self: center;
+			margin: 0;
+			font-size: var(--uui-type-small-size);
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			color: var(--uui-color-text-alt);
+		}
+
+		.headline {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-3);
+		}
+
+		.meta {
+			display: grid;
+			grid-template-columns: max-content 1fr;
+			align-items: center;
+			gap: var(--uui-size-space-2) var(--uui-size-space-5);
+			margin: 0 0 var(--uui-size-space-2);
+		}
+
+		.meta dt {
+			font-weight: 700;
+		}
+
+		.tags {
+			display: inline-flex;
+			flex-wrap: wrap;
+			gap: var(--uui-size-space-2);
+		}
+
+		.meta dd {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--uui-size-space-2);
+			margin: 0;
+		}
+
+		/* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
+		.changed:not(.property):not(.dot) {
+			background: color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
+			border-radius: var(--uui-border-radius);
+			box-shadow: 0 0 0 var(--uui-size-space-1)
+				color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
+		}
+
+		uui-tab-group {
+			--uui-tab-divider: var(--uui-color-border);
+			border-bottom: 1px solid var(--uui-color-border);
+		}
+
+		.tab-label {
+			display: inline-flex;
+			align-items: center;
+			gap: var(--uui-size-space-2);
+			white-space: nowrap;
+		}
+
+		.dot {
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+		}
+
+		.dot.changed {
+			background: var(--uui-color-warning);
+		}
+
+		/* marked with an inset bar rather than a border, so the content doesn't shift. */
+		.property.added {
+			box-shadow: inset 3px 0 0 var(--uui-color-positive);
+			background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
+		}
+
+		.property.removed {
+			box-shadow: inset 3px 0 0 var(--uui-color-danger);
+			background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
+		}
+
+		.property.changed {
+			box-shadow: inset 3px 0 0 var(--uui-color-warning);
+			background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
+		}
+
+		/* properties run edge to edge in their box, like the backoffice editor. */
+		.property {
+			padding: 0 var(--uui-size-space-5);
+			margin: 0 calc(-1 * var(--uui-size-space-5));
+		}
+
+		.property:first-child {
+			margin-top: calc(-1 * var(--uui-size-space-5));
+		}
+
+		.property:last-child {
+			margin-bottom: calc(-1 * var(--uui-size-space-5));
+		}
+
+		.property + .property {
+			border-top: 1px solid var(--uui-color-divider);
+		}
+
+		/* umb-property pads itself for a full workspace, tighten it up here. */
+		umb-property {
+			--uui-size-layout-1: var(--uui-size-space-4);
+		}
+
+		.empty {
+			margin: 0;
+			color: var(--uui-color-text-alt);
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncContentPreviewElement.prototype, "preview", void 0);
+__decorate([
+    state()
+], uSyncContentPreviewElement.prototype, "_activeTab", void 0);
+__decorate([
+    state()
+], uSyncContentPreviewElement.prototype, "_culture", void 0);
+__decorate([
+    state()
+], uSyncContentPreviewElement.prototype, "_onlyChanges", void 0);
+uSyncContentPreviewElement = __decorate([
+    customElement('usync-content-preview')
+], uSyncContentPreviewElement);
+export { uSyncContentPreviewElement };
+/** values that mean "nothing set" compare as equal */
+function normalise(value) {
+    return isEmpty(value) ? undefined : value;
+}
+function isEmpty(value) {
+    return (value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0));
+}
+export default uSyncContentPreviewElement;