@jumoo/usync 17.5.0 → 17.5.2-prerelease.15

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

@@ -22,26 +22,26 @@ let uSyncResultGroupView = class uSyncResultGroupView extends UmbLitElement {
         const changeCount = this.getChangeCount() ?? 0;
         if (changeCount === 0 && !this.showAll)
             return nothing;
-        return html `
-			<uui-box
+        return html `
+			<uui-box
 				class=${classMap({
             has_changes: changeCount > 0,
-        })}>
-				<div
-					class="summary ${when(this.expanded, () => 'expanded')}"
-					@click=${() => (this.expanded = !this.expanded)}>
-					<h4>${this.localize.termOrDefault('uSync_' + this.groupName, this.groupName)}</h4>
-					<div class="summary-right">
-						<h4 class="count">${changeCount}/${this.results?.length}</h4>
-						<uui-icon
-							name="icon-play"
-							class=${classMap({ expanded: this.expanded })}></uui-icon>
-					</div>
-				</div>
-				<uui-table>
-					${when(this.expanded == true, () => html `${this.renderGroupedRows(this.results)}`)}
-				</uui-table>
-			</uui-box>
+        })}>
+				<div
+					class="summary ${when(this.expanded, () => 'expanded')}"
+					@click=${() => (this.expanded = !this.expanded)}>
+					<h4>${this.localize.termOrDefault('uSync_' + this.groupName, this.groupName)}</h4>
+					<div class="summary-right">
+						<h4 class="count">${changeCount}/${this.results?.length}</h4>
+						<uui-icon
+							name="icon-play"
+							class=${classMap({ expanded: this.expanded })}></uui-icon>
+					</div>
+				</div>
+				<uui-table>
+					${when(this.expanded == true, () => html `${this.renderGroupedRows(this.results)}`)}
+				</uui-table>
+			</uui-box>
 		`;
     }
     renderGroupedRows(results) {
@@ -53,43 +53,43 @@ let uSyncResultGroupView = class uSyncResultGroupView extends UmbLitElement {
         return rowsHtml;
     }
 };
-uSyncResultGroupView.styles = css `
-		uui-box {
-			cursor: pointer;
-			--uui-box-default-padding: 0;
-		}
-
-		.expanded {
-			border-bottom: 1px solid var(--uui-color-border);
-		}
-
-		.summary {
-			display: flex;
-			margin: 0;
-			padding: 0 20px;
-			justify-content: space-between;
-		}
-
-		.summary-right {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-2);
-			color: var(--uui-color-border-emphasis);
-		}
-
-		.summary-right uui-icon {
-			transform: rotate(90deg);
-			transition: transform 0.5s cubic-bezier(0.42, 0, 0.37, 1.62);
-		}
-
-		.summary-right uui-icon.expanded {
-			transform: rotate(-90deg);
-			border-bottom: none;
-		}
-
-		.count {
-			color: var(--uui-text);
-		}
+uSyncResultGroupView.styles = css `
+		uui-box {
+			cursor: pointer;
+			--uui-box-default-padding: 0;
+		}
+
+		.expanded {
+			border-bottom: 1px solid var(--uui-color-border);
+		}
+
+		.summary {
+			display: flex;
+			margin: 0;
+			padding: 0 20px;
+			justify-content: space-between;
+		}
+
+		.summary-right {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-2);
+			color: var(--uui-color-border-emphasis);
+		}
+
+		.summary-right uui-icon {
+			transform: rotate(90deg);
+			transition: transform 0.5s cubic-bezier(0.42, 0, 0.37, 1.62);
+		}
+
+		.summary-right uui-icon.expanded {
+			transform: rotate(-90deg);
+			border-bottom: none;
+		}
+
+		.count {
+			color: var(--uui-text);
+		}
 	`;
 __decorate([
     state()

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';
@@ -52,37 +52,37 @@ let uSyncResultsView = class uSyncResultsView extends UmbElementMixin(LitElement
             const groupChanges = groups[key].filter((r) => r.change !== ChangeType.NO_CHANGE).length ?? 0;
             if (groupChanges === 0 && !this.showAll)
                 continue;
-            const groupHtml = html `<usync-result-group
-				.groupName=${key}
-				.results=${groups[key]}
-				.showAll=${this.showAll}
+            const groupHtml = html `<usync-result-group
+				.groupName=${key}
+				.results=${groups[key]}
+				.showAll=${this.showAll}
 				@show-detail=${__classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_showDetail)}></usync-result-group> `;
             groupsHtml.push(groupHtml);
         }
         return this.changeCount == 0 && !this.showAll
-            ? html `
-					${this.renderResultBar(this.results?.length || 0, this.changeCount)}
-					<div class="empty">
-						<umb-localize key="uSync_noChange"></umb-localize>
-					</div>
+            ? html `
+					${this.renderResultBar(this.results?.length || 0, this.changeCount)}
+					<div class="empty">
+						<umb-localize key="uSync_noChange"></umb-localize>
+					</div>
 				`
-            : html `<div id="result-box">
-					${this.renderResultBar(this.results?.length || 0, this.changeCount)}
-					${groupsHtml}
+            : html `<div id="result-box">
+					${this.renderResultBar(this.results?.length || 0, this.changeCount)}
+					${groupsHtml}
 				</div>`;
     }
     renderResultBar(count, changes) {
         if (this.hideResultBar)
             return nothing;
         const localKey = changes === 0 ? 'uSync_noChangeCount' : 'uSync_changeCount';
-        return html `<div class="result-header">
-			<uui-toggle
-				.label=${this.localize.termOrDefault('uSync_showAll', 'Show all items')}
-				?checked=${this.showAll}
-				@change=${__classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_toggleShowAll)}></uui-toggle>
-			<umb-localize .key=${localKey} .args=${[count, changes]}
-				>${changes}/${count} items</umb-localize
-			>
+        return html `<div class="result-header">
+			<uui-toggle
+				.label=${this.localize.termOrDefault('uSync_showAll', 'Show all items')}
+				?checked=${this.showAll}
+				@change=${__classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_toggleShowAll)}></uui-toggle>
+			<umb-localize .key=${localKey} .args=${[count, changes]}
+				>${changes}/${count} items</umb-localize
+			>
 		</div>`;
     }
 };
@@ -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,49 +111,56 @@ _uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
     if (!data)
         return;
 };
-uSyncResultsView.styles = css `
-		:host {
-			display: block;
-			margin: var(--uui-size-space-4) 0;
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-		}
-
-		#result-box {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-		}
-
-		uui-table {
-			position: relative;
-			z-index: 100;
-		}
-
-		.result-header {
-			display: flex;
-			justify-content: space-between;
-			padding: var(--uui-size-space-4);
-			border: 1px solid var(--uui-color-border);
-			padding: var(--uui-size-space-4);
-		}
-
-		.result-header h3 {
-			margin: 0;
-			padding: 0;
-		}
-
-		.empty {
-			padding: var(--uui-size-20);
-			font-size: var(--uui-type-h5-size);
-			text-align: center;
-			font-weight: 900;
-		}
-
-		.error {
-			background-color: #fce4ec;
-		}
+_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;
+			margin: var(--uui-size-space-4) 0;
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+		}
+
+		#result-box {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+		}
+
+		uui-table {
+			position: relative;
+			z-index: 100;
+		}
+
+		.result-header {
+			display: flex;
+			justify-content: space-between;
+			padding: var(--uui-size-space-4);
+			border: 1px solid var(--uui-color-border);
+			padding: var(--uui-size-space-4);
+		}
+
+		.result-header h3 {
+			margin: 0;
+			padding: 0;
+		}
+
+		.empty {
+			padding: var(--uui-size-20);
+			font-size: var(--uui-type-h5-size);
+			text-align: center;
+			font-weight: 900;
+		}
+
+		.error {
+			background-color: #fce4ec;
+		}
 	`;
 __decorate([
     property({ type: Array })

package/dist/components/usync-sync-file-info-view.js

@@ -30,8 +30,8 @@ _uSyncSyncFileInfoView_renderHmacMismatch = function _uSyncSyncFileInfoView_rend
         return nothing;
     if (this._syncFileInfo.hmacMatch)
         return nothing;
-    return html `<div class="banner">
-			<umb-localize key="uSync_hmacMismatch"></umb-localize>
+    return html `<div class="banner">
+			<umb-localize key="uSync_hmacMismatch"></umb-localize>
 		</div>`;
 };
 _uSyncSyncFileInfoView_renderFormatMismatch = function _uSyncSyncFileInfoView_renderFormatMismatch() {
@@ -39,17 +39,17 @@ _uSyncSyncFileInfoView_renderFormatMismatch = function _uSyncSyncFileInfoView_re
         return nothing;
     if (this._syncFileInfo.isCurrent)
         return nothing;
-    return html `<div class="banner">
-			<umb-localize key="uSync_formatMismatch"></umb-localize>
+    return html `<div class="banner">
+			<umb-localize key="uSync_formatMismatch"></umb-localize>
 		</div>`;
 };
 uSyncSyncFileInfoView.styles = [
-    css `
-			.banner {
-				padding: var(--uui-size-space-2) var(--uui-size-space-4);
-				margin: 0 0 var(--uui-size-space-4);
-				background-color: var(--uui-color-surface);
-			}
+    css `
+			.banner {
+				padding: var(--uui-size-space-2) var(--uui-size-space-4);
+				margin: 0 0 var(--uui-size-space-4);
+				background-color: var(--uui-color-surface);
+			}
 		`,
 ];
 __decorate([

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,65 +9,176 @@ 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 ?? ''}">
-				<div class="layout">
-					<uui-box style="--uui-box-default-padding: 0;">
-						<div slot="header" id="header">
-							<h3><umb-localize key="uSync_detailHeadline"></umb-localize></h3>
-							<umb-localize key="uSync_detailHeader"></umb-localize>
-						</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>
-				</div>
-				<div slot="actions">
-					<uui-button
-						id="cancel"
-						.label=${this.localize.term('general_close')}
-						@click="${__classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_onClose)}"></uui-button>
-				</div>
-			</umb-body-layout>
+        return html `
+			<umb-body-layout headline="Changes : ${this._item?.name ?? ''}">
+				<div class="layout">
+					<uui-box style="--uui-box-default-padding: 0;">
+						<div slot="header" id="header">
+							<h3><umb-localize key="uSync_detailHeadline"></umb-localize></h3>
+							<umb-localize key="uSync_detailHeader"></umb-localize>
+						</div>
+						<div slot="header-actions">${this.renderActions()}</div>
+					</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"
+						.label=${this.localize.term('general_close')}
+						@click="${__classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_onClose)}"></uui-button>
+				</div>
+			</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"
-			type="button"
-			look="outline"
-			.state=${this.importState}
-			.label=${this.localize.termOrDefault('uSync_importSingle', 'Import')}
+        return html ` <uui-button
+			id="import"
+			type="button"
+			look="outline"
+			.state=${this.importState}
+			.label=${this.localize.termOrDefault('uSync_importSingle', 'Import')}
 			@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;
@@ -77,20 +188,39 @@ _uSyncDetailsModalElement_onImport = async function _uSyncDetailsModalElement_on
 _uSyncDetailsModalElement_onClose = function _uSyncDetailsModalElement_onClose() {
     this.modalContext?.reject();
 };
-uSyncDetailsModalElement.styles = css `
-		.layout {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-		}
-
-		#header h3 {
-			margin: 0;
-		}
+uSyncDetailsModalElement.styles = css `
+		.layout {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+		}
+
+		#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;