@jumoo/usync 17.5.1 → 17.5.2-prerelease.15

package/dist/components/usync-data-type-preview.js

@@ -0,0 +1,293 @@
+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 __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 _uSyncDataTypePreviewElement_instances, _uSyncDataTypePreviewElement_renderSide, _uSyncDataTypePreviewElement_renderMissing, _uSyncDataTypePreviewElement_renderInfo, _uSyncDataTypePreviewElement_renderEditor, _uSyncDataTypePreviewElement_renderConfig;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { classMap, css, customElement, html, nothing, property, } from '@umbraco-cms/backoffice/external/lit';
+import '@umbraco-cms/backoffice/components';
+import { deepEqual, prettyJson } from '../utils/diff/index.js';
+/**
+ * Shows the current and incoming versions of a data type side by side,
+ * rendered with the real property editor, so you can see what an import
+ * will do before running it.
+ */
+let uSyncDataTypePreviewElement = class uSyncDataTypePreviewElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncDataTypePreviewElement_instances.add(this);
+    }
+    render() {
+        if (!this.preview)
+            return nothing;
+        const current = this.preview.currentDataType ?? undefined;
+        const incoming = this.preview.incomingDataType ?? undefined;
+        return html `
+			<div class="sides">
+				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'current', current, incoming)}
+				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'incoming', incoming, current)}
+			</div>
+		`;
+    }
+};
+_uSyncDataTypePreviewElement_instances = new WeakSet();
+_uSyncDataTypePreviewElement_renderSide = function _uSyncDataTypePreviewElement_renderSide(side, dataType, other) {
+    const headline = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)')
+        : this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)');
+    return html `
+			<div class="side">
+				<h4 class="side-headline">${headline}</h4>
+				${dataType
+        ? html `
+								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderInfo).call(this, dataType, other)} ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderEditor).call(this, dataType)}
+								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderConfig).call(this, dataType, other, side)}
+							`
+        : __classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderMissing).call(this, side)}
+			</div>
+		`;
+};
+_uSyncDataTypePreviewElement_renderMissing = function _uSyncDataTypePreviewElement_renderMissing(side) {
+    const message = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewNotInSite', 'This item does not exist in the site yet')
+        : 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');
+    return html `<uui-box class="info"><p class="empty">${message}</p></uui-box>`;
+};
+_uSyncDataTypePreviewElement_renderInfo = function _uSyncDataTypePreviewElement_renderInfo(dataType, other) {
+    const changed = (field) => other !== undefined && other[field] !== dataType[field];
+    return html `
+			<uui-box class="info">
+				<div slot="headline" class="headline">
+					<umb-icon name="icon-autofill"></umb-icon>
+					<span class=${classMap({ changed: changed('name') })}>${dataType.name}</span>
+				</div>
+				<dl class="meta">
+					<dt>
+						${this.localize.termOrDefault('uSync_previewPropertyEditor', 'Property editor')}
+					</dt>
+					<dd class=${classMap({ changed: changed('editorAlias') })}>
+						<code>${dataType.editorAlias}</code>
+					</dd>
+					<dt>
+						${this.localize.termOrDefault('uSync_previewPropertyEditorUi', 'Property editor UI')}
+					</dt>
+					<dd class=${classMap({ changed: changed('editorUiAlias') })}>
+						<code>${dataType.editorUiAlias}</code>
+					</dd>
+				</dl>
+			</uui-box>
+		`;
+};
+_uSyncDataTypePreviewElement_renderEditor = function _uSyncDataTypePreviewElement_renderEditor(dataType) {
+    return html `
+			<uui-box
+				.headline=${this.localize.termOrDefault('uSync_previewEditor', 'Editor preview')}>
+				<!-- inert rather than readonly: most editors render only their value when
+				     readonly, which is empty here, so you wouldn't see the editor at all. -->
+				<umb-property-dataset .value=${[]} inert>
+					<umb-property
+						alias="usyncPreview"
+						.label=${dataType.name}
+						.description=${this.localize.termOrDefault('uSync_previewEditorDesc', 'How this data type looks to editors')}
+						.propertyEditorUiAlias=${dataType.editorUiAlias}
+						.config=${dataType.values}></umb-property>
+				</umb-property-dataset>
+			</uui-box>
+		`;
+};
+_uSyncDataTypePreviewElement_renderConfig = function _uSyncDataTypePreviewElement_renderConfig(dataType, other, side) {
+    const values = [...dataType.values].sort((a, b) => a.alias.localeCompare(b.alias));
+    return html `
+			<uui-box
+				.headline=${this.localize.termOrDefault('uSync_previewConfiguration', 'Configuration')}>
+				${values.length === 0
+        ? html `<p class="empty">
+								${this.localize.termOrDefault('uSync_previewNoConfiguration', 'No configuration')}
+							</p>`
+        : html `<table>
+								${values.map((value) => {
+            const status = configStatus(value.alias, value.value, other, side);
+            return html `<tr class="row-${status}">
+										<th><code>${value.alias}</code></th>
+										<td><pre>${formatConfigValue(value.value)}</pre></td>
+									</tr>`;
+        })}
+							</table>`}
+			</uui-box>
+		`;
+};
+uSyncDataTypePreviewElement.styles = css `
+		:host {
+			display: block;
+			container-type: inline-size;
+		}
+
+		/* the two sides share rows (headline, info, editor, config), so the
+		   boxes line up across the sides. */
+		.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;
+			min-width: 0;
+		}
+
+		.side > :last-child {
+			align-self: start;
+		}
+
+		@container (max-width: 760px) {
+			.sides {
+				grid-template-columns: 1fr;
+				grid-template-rows: none;
+				row-gap: var(--uui-size-layout-1);
+			}
+
+			.side {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+				grid-row: auto;
+			}
+		}
+
+		.side-headline {
+			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: baseline;
+			gap: var(--uui-size-space-3) var(--uui-size-space-5);
+			margin: 0;
+		}
+
+		.meta dt {
+			font-weight: 700;
+		}
+
+		.meta dd {
+			margin: 0;
+			overflow-wrap: anywhere;
+		}
+
+		/* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
+		.changed {
+			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);
+		}
+
+		/* umb-property pads itself for a full workspace, tighten it up here. */
+		umb-property {
+			--uui-size-layout-1: var(--uui-size-space-2);
+		}
+
+		table {
+			width: 100%;
+			border-collapse: collapse;
+			margin: calc(-1 * var(--uui-size-space-2)) 0;
+		}
+
+		tr + tr {
+			border-top: 1px solid var(--uui-color-divider);
+		}
+
+		th,
+		td {
+			text-align: left;
+			vertical-align: baseline;
+			padding: var(--uui-size-space-3) var(--uui-size-space-3);
+		}
+
+		/* the alias column is as wide as the longest alias (up to 40%), so values sit beside their names. */
+		th {
+			width: 1%;
+			max-width: 40%;
+			white-space: nowrap;
+			font-weight: 700;
+		}
+
+		th code,
+		td pre {
+			font-size: var(--uui-type-small-size);
+		}
+
+		td pre {
+			margin: 0;
+			white-space: pre-wrap;
+			word-break: break-word;
+		}
+
+		/* marked with an inset bar rather than a border, so the content doesn't shift. */
+		tr.row-changed {
+			box-shadow: inset 3px 0 0 var(--uui-color-warning);
+			background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
+		}
+
+		tr.row-added {
+			box-shadow: inset 3px 0 0 var(--uui-color-positive);
+			background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
+		}
+
+		tr.row-removed {
+			box-shadow: inset 3px 0 0 var(--uui-color-danger);
+			background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
+		}
+
+		.empty {
+			margin: 0;
+			color: var(--uui-color-text-alt);
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncDataTypePreviewElement.prototype, "preview", void 0);
+uSyncDataTypePreviewElement = __decorate([
+    customElement('usync-data-type-preview')
+], uSyncDataTypePreviewElement);
+export { uSyncDataTypePreviewElement };
+/**
+ * how a config value on this side compares to the other side. an alias
+ * missing from the current side is being added, one missing from the
+ * incoming side is being removed.
+ */
+function configStatus(alias, value, other, side) {
+    if (!other)
+        return 'unchanged';
+    const match = other.values.find((v) => v.alias === alias);
+    if (!match)
+        return side === 'incoming' ? 'added' : 'removed';
+    return deepEqual(value, match.value) ? 'unchanged' : 'changed';
+}
+function formatConfigValue(value) {
+    return typeof value === 'string' ? value : prettyJson(value);
+}
+export default uSyncDataTypePreviewElement;

package/dist/components/usync-results-view.js

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _uSyncResultsView_instances, _uSyncResultsView_modalContext, _uSyncResultsView_toggleShowAll, _uSyncResultsView_showDetail;
+var _uSyncResultsView_instances, _uSyncResultsView_modalContext, _uSyncResultsView_toggleShowAll, _uSyncResultsView_showDetail, _uSyncResultsView_visibleItems;
 import { LitElement, html, customElement, property, css, state, nothing, } from '@umbraco-cms/backoffice/external/lit';
 import { ChangeType } from '@jumoo/uSync';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
@@ -98,10 +98,11 @@ _uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
     const detailsModal = __classPrivateFieldGet(this, _uSyncResultsView_modalContext, "f")?.open(this, USYNC_DETAILS_MODAL, {
         data: {
             item: e.action,
-            showActions: !this.hideActions &&
-                (e.action.change == ChangeType.CREATE ||
-                    e.action.change == ChangeType.UPDATE ||
-                    e.action.change == ChangeType.IMPORT),
+            items: __classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_visibleItems).call(this),
+            showActions: (item) => !this.hideActions &&
+                (item.change == ChangeType.CREATE ||
+                    item.change == ChangeType.UPDATE ||
+                    item.change == ChangeType.IMPORT),
         },
     });
     const data = await detailsModal?.onSubmit().catch(() => {
@@ -110,6 +111,13 @@ _uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
     if (!data)
         return;
 };
+_uSyncResultsView_visibleItems = function _uSyncResultsView_visibleItems() {
+    const groups = this.groupBy(this.results || [], (result) => result.itemType);
+    return Object.values(groups)
+        .flat()
+        .filter((r) => r.change !== ChangeType.EXPORT &&
+        (this.showAll || r.change !== ChangeType.NO_CHANGE));
+};
 uSyncResultsView.styles = css `
 		:host {
 			display: block;

package/dist/dialogs/details-modal-element.d.ts

@@ -1,12 +1,23 @@
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { nothing } from '@umbraco-cms/backoffice/external/lit';
-import { uSyncDetailsModalData, uSyncDetailsModalValue } from '@jumoo/uSync';
+import { uSyncDetailsModalData, uSyncDetailsModalValue, type SyncItemPreviewResponse } from '@jumoo/uSync';
 import { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
+import '../components/usync-data-type-preview.js';
+import '../components/usync-content-type-preview.js';
+import '../components/usync-content-preview.js';
 export declare class uSyncDetailsModalElement extends UmbModalBaseElement<uSyncDetailsModalData, uSyncDetailsModalValue> {
     #private;
     importState: UUIButtonState;
+    private _preview?;
+    private _tab;
+    private _item?;
+    private _index;
     constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    renderNavigation(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderTabs(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderPreview(preview: SyncItemPreviewResponse): typeof nothing | import("lit-html").TemplateResult<1>;
     renderActions(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

package/dist/dialogs/details-modal-element.js

@@ -9,22 +9,34 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _uSyncDetailsModalElement_instances, _uSyncDetailsModalElement_onImport, _uSyncDetailsModalElement_onClose;
+var _uSyncDetailsModalElement_instances, _uSyncDetailsModalElement_repository, _uSyncDetailsModalElement_moveTo, _uSyncDetailsModalElement_loadPreview, _uSyncDetailsModalElement_showActions, _uSyncDetailsModalElement_onImport, _uSyncDetailsModalElement_onClose;
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement, } from '@umbraco-cms/backoffice/modal';
 import { css, customElement, html, nothing, state, } from '@umbraco-cms/backoffice/external/lit';
-import { USYNC_IMPORT_SINGLE_MODAL, } from '@jumoo/uSync';
+import { USYNC_IMPORT_SINGLE_MODAL, uSyncActionRepository, } from '@jumoo/uSync';
+import '../components/usync-data-type-preview.js';
+import '../components/usync-content-type-preview.js';
+import '../components/usync-content-preview.js';
 let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBaseElement {
     constructor() {
         super();
         _uSyncDetailsModalElement_instances.add(this);
+        this._tab = 'changes';
+        this._index = -1;
+        _uSyncDetailsModalElement_repository.set(this, new uSyncActionRepository(this));
         // this.consumeContext(USYNC_CORE_CONTEXT_TOKEN, (_instance) => {
         // 	if (!_instance) return;
         // 	this.#actionContext = _instance;
         // });
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this._item = this.data?.item;
+        this._index = this.data?.items?.indexOf(this.data.item) ?? -1;
+        __classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_loadPreview).call(this);
+    }
     render() {
         return html `
-			<umb-body-layout headline="Changes : ${this.data?.item.name ?? ''}">
+			<umb-body-layout headline="Changes : ${this._item?.name ?? ''}">
 				<div class="layout">
 					<uui-box style="--uui-box-default-padding: 0;">
 						<div slot="header" id="header">
@@ -33,10 +45,14 @@ let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBa
 						</div>
 						<div slot="header-actions">${this.renderActions()}</div>
 					</uui-box>
-					<uui-box style="--uui-box-default-padding: 0;">
-						<usync-change-view .item=${this.data?.item}></usync-change-view>
-					</uui-box>
+					${this.renderTabs()}
+					${this._tab === 'preview' && this._preview
+            ? this.renderPreview(this._preview)
+            : html `<uui-box style="--uui-box-default-padding: 0;">
+									<usync-change-view .item=${this._item}></usync-change-view>
+								</uui-box>`}
 				</div>
+				${this.renderNavigation()}
 				<div slot="actions">
 					<uui-button
 						id="cancel"
@@ -46,8 +62,66 @@ let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBa
 			</umb-body-layout>
 		`;
     }
+    renderNavigation() {
+        const count = this.data?.items?.length ?? 0;
+        if (count < 2 || this._index < 0)
+            return nothing;
+        return html `<div slot="footer-info" id="navigation">
+			<uui-button
+				compact
+				look="secondary"
+				.label=${this.localize.term('general_previous')}
+				?disabled=${this._index === 0}
+				@click=${() => __classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_moveTo).call(this, this._index - 1)}>
+				<uui-icon name="icon-arrow-left"></uui-icon>
+			</uui-button>
+			<span>
+				${this.localize.termOrDefault('uSync_detailPosition', `${this._index + 1} of ${count}`, this.localize.number(this._index + 1), this.localize.number(count))}
+			</span>
+			<uui-button
+				compact
+				look="secondary"
+				.label=${this.localize.term('general_next')}
+				?disabled=${this._index === count - 1}
+				@click=${() => __classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_moveTo).call(this, this._index + 1)}>
+				<uui-icon name="icon-arrow-right"></uui-icon>
+			</uui-button>
+		</div>`;
+    }
+    renderTabs() {
+        if (!this._preview)
+            return nothing;
+        return html `<uui-tab-group>
+			<uui-tab
+				.label=${this.localize.termOrDefault('uSync_changesTab', 'Changes')}
+				?active=${this._tab === 'changes'}
+				@click=${() => (this._tab = 'changes')}></uui-tab>
+			<uui-tab
+				.label=${this.localize.termOrDefault('uSync_previewTab', 'Preview')}
+				?active=${this._tab === 'preview'}
+				@click=${() => (this._tab = 'preview')}></uui-tab>
+		</uui-tab-group>`;
+    }
+    renderPreview(preview) {
+        switch (preview.entityType) {
+            case 'data-type':
+                return html `<usync-data-type-preview
+					.preview=${preview}></usync-data-type-preview>`;
+            case 'document-type':
+            case 'media-type':
+            case 'member-type':
+                return html `<usync-content-type-preview
+					.preview=${preview}></usync-content-type-preview>`;
+            case 'document':
+            case 'media':
+                return html `<usync-content-preview
+					.preview=${preview}></usync-content-preview>`;
+            default:
+                return nothing;
+        }
+    }
     renderActions() {
-        if (!this.data?.showActions)
+        if (!__classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_showActions).call(this))
             return nothing;
         return html ` <uui-button
 			id="import"
@@ -58,16 +132,53 @@ let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBa
 			@click="${__classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_onImport)}"></uui-button>`;
     }
 };
+_uSyncDetailsModalElement_repository = new WeakMap();
 _uSyncDetailsModalElement_instances = new WeakSet();
+_uSyncDetailsModalElement_moveTo = function _uSyncDetailsModalElement_moveTo(index) {
+    const item = this.data?.items?.[index];
+    if (!item)
+        return;
+    this._index = index;
+    this._item = item;
+    this._preview = undefined;
+    __classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_loadPreview).call(this);
+};
+_uSyncDetailsModalElement_loadPreview = async function _uSyncDetailsModalElement_loadPreview() {
+    const item = this._item;
+    if (!item?.handler || !item.key) {
+        this._tab = 'changes';
+        return;
+    }
+    // only some handlers support previews, the rest return a 404
+    // and the modal stays as it was (just the changes list).
+    const { data } = await __classPrivateFieldGet(this, _uSyncDetailsModalElement_repository, "f").getPreview(item.handler, item.key);
+    // moving through the list quickly can return previews out of order,
+    // so drop anything that isn't for the item we are now showing.
+    if (item !== this._item)
+        return;
+    if (data?.entityType) {
+        this._preview = data;
+    }
+    else {
+        this._tab = 'changes';
+    }
+};
+_uSyncDetailsModalElement_showActions = function _uSyncDetailsModalElement_showActions() {
+    const showActions = this.data?.showActions;
+    if (typeof showActions === 'function') {
+        return this._item ? showActions(this._item) : false;
+    }
+    return showActions ?? false;
+};
 _uSyncDetailsModalElement_onImport = async function _uSyncDetailsModalElement_onImport(e) {
     e.stopPropagation();
-    if (!this.data?.item)
+    if (!this._item)
         return;
     const modalContext = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
     if (!modalContext)
         return;
     const modal = modalContext.open(this, USYNC_IMPORT_SINGLE_MODAL, {
-        data: { action: this.data?.item },
+        data: { action: this._item },
     });
     const data = await modal?.onSubmit().catch(() => {
         return;
@@ -87,10 +198,29 @@ uSyncDetailsModalElement.styles = css `
 		#header h3 {
 			margin: 0;
 		}
+
+		#navigation {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-3);
+			padding-left: var(--uui-size-space-4);
+		}
 	`;
 __decorate([
     state()
 ], uSyncDetailsModalElement.prototype, "importState", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_preview", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_tab", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_item", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_index", void 0);
 uSyncDetailsModalElement = __decorate([
     customElement('usync-details-modal')
 ], uSyncDetailsModalElement);

package/dist/dialogs/details-modal-token.d.ts

@@ -2,7 +2,16 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import { USyncActionView } from '@jumoo/uSync';
 export interface uSyncDetailsModalData {
     item: USyncActionView;
-    showActions?: boolean;
+    /**
+     * show the import button, either for every item or decided per item
+     * (when moving through `items` the answer can change from item to item).
+     */
+    showActions?: boolean | ((item: USyncActionView) => boolean);
+    /**
+     * the full list the item came from, when set the dialog can move
+     * to the previous / next item in the list.
+     */
+    items?: Array<USyncActionView>;
 }
 export interface uSyncDetailsModalValue {
     result: boolean;

package/dist/lang/files/da-dk.d.ts

@@ -24,6 +24,43 @@ declare const _default: {
         showAll: string;
         detailHeadline: string;
         detailHeader: string;
+        detailPosition: string;
+        previewTab: string;
+        changesTab: string;
+        previewCurrent: string;
+        previewIncoming: string;
+        previewNotInSite: string;
+        previewDeleted: string;
+        previewFailed: string;
+        previewEditor: string;
+        previewEditorDesc: string;
+        previewConfiguration: string;
+        previewNoConfiguration: string;
+        previewPropertyEditor: string;
+        previewPropertyEditorUi: string;
+        previewDocumentType: string;
+        previewMediaType: string;
+        previewMemberType: string;
+        previewElementType: string;
+        previewAllowedAtRoot: string;
+        previewVariesByCulture: string;
+        previewVariesBySegment: string;
+        previewCompositions: string;
+        previewGenericTab: string;
+        previewNoProperties: string;
+        previewMissingDataType: string;
+        previewNewDataType: string;
+        previewNew: string;
+        previewParent: string;
+        previewRoot: string;
+        previewSortOrder: string;
+        previewTemplate: string;
+        previewPublished: string;
+        previewNotPublished: string;
+        previewTrashed: string;
+        previewCulture: string;
+        previewOnlyChanges: string;
+        previewNoValueChanges: string;
         runningInBackground: string;
         connectionLost: string;
         importSingle: string;

package/dist/lang/files/da-dk.js

@@ -24,6 +24,43 @@ export default {
         showAll: 'Vis alle elementer',
         detailHeadline: 'Registrerede ændringer',
         detailHeader: 'Ting der er anderledes',
+        detailPosition: '%0% af %1%',
+        previewTab: 'Visuel',
+        changesTab: 'Ændringer',
+        previewCurrent: 'Nuværende (dette site)',
+        previewIncoming: 'Indkommende (uSync-filer)',
+        previewNotInSite: 'Dette element findes ikke på sitet endnu',
+        previewDeleted: 'Dette element bliver slettet eller omdøbt af importen',
+        previewFailed: 'Det indkommende element kunne ikke bygges til forhåndsvisningen',
+        previewEditor: 'Editor-forhåndsvisning',
+        previewEditorDesc: 'Sådan ser denne datatype ud for redaktører',
+        previewConfiguration: 'Konfiguration',
+        previewNoConfiguration: 'Ingen konfiguration',
+        previewPropertyEditor: 'Property editor',
+        previewPropertyEditorUi: 'Property editor UI',
+        previewDocumentType: 'Dokumenttype',
+        previewMediaType: 'Medietype',
+        previewMemberType: 'Medlemstype',
+        previewElementType: 'Elementtype',
+        previewAllowedAtRoot: 'Tilladt i roden',
+        previewVariesByCulture: 'Varierer efter kultur',
+        previewVariesBySegment: 'Varierer efter segment',
+        previewCompositions: 'Kompositioner',
+        previewGenericTab: 'Generelt',
+        previewNoProperties: 'Ingen egenskaber',
+        previewMissingDataType: 'datatypen for denne egenskab findes ikke på sitet endnu',
+        previewNewDataType: 'ny datatype',
+        previewNew: 'ny',
+        previewParent: 'Overordnet',
+        previewRoot: '(roden)',
+        previewSortOrder: 'Sorteringsrækkefølge',
+        previewTemplate: 'Skabelon',
+        previewPublished: 'Udgivet',
+        previewNotPublished: 'Ikke udgivet',
+        previewTrashed: 'I papirkurven',
+        previewCulture: 'Sprog',
+        previewOnlyChanges: 'Vis kun ændringer',
+        previewNoValueChanges: 'Ingen værdier ændres',
         runningInBackground: 'uSync kører denne proces i baggrunden. Hvis du navigerer væk fra denne side, vil den fortsætte med at køre.',
         connectionLost: 'Forbindelsen til serveren er gået tabt. Processen vil fortsætte med at køre i baggrunden, men du vil ikke se opdateringer her.',
         importSingle: 'Importer',