@jumoo/usync 0.0.0-stage → 17.5.0

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

@@ -0,0 +1,176 @@
+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 _uSyncResultsView_instances, _uSyncResultsView_modalContext, _uSyncResultsView_toggleShowAll, _uSyncResultsView_showDetail;
+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';
+import { UMB_MODAL_MANAGER_CONTEXT, } from '@umbraco-cms/backoffice/modal';
+import { USYNC_DETAILS_MODAL } from '@jumoo/uSync';
+let uSyncResultsView = class uSyncResultsView extends UmbElementMixin(LitElement) {
+    constructor() {
+        super();
+        _uSyncResultsView_instances.add(this);
+        _uSyncResultsView_modalContext.set(this, void 0);
+        this.results = [];
+        this.hideResultBar = false;
+        this.hideActions = false;
+        this.showAll = false;
+        this.changeCount = 0;
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => {
+            __classPrivateFieldSet(this, _uSyncResultsView_modalContext, _instance, "f");
+        });
+    }
+    groupBy(arr, fn) {
+        return arr.reduce((prev, curr) => {
+            const groupKey = fn(curr);
+            const group = prev[groupKey] || [];
+            group.push(curr);
+            return { ...prev, [groupKey]: group };
+        }, {});
+    }
+    render() {
+        this.changeCount =
+            this.results?.filter((r) => r.change !== ChangeType.NO_CHANGE).length ?? 0;
+        const groups = this.groupBy(this.results || [], (result) => result.itemType);
+        const groupsHtml = [];
+        for (const key in groups) {
+            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}
+				@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 `<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
+			>
+		</div>`;
+    }
+};
+_uSyncResultsView_modalContext = new WeakMap();
+_uSyncResultsView_instances = new WeakSet();
+_uSyncResultsView_toggleShowAll = function _uSyncResultsView_toggleShowAll() {
+    this.showAll = !this.showAll;
+};
+_uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
+    console.debug('Showing detail for action:', e.action);
+    if (e.action.change == ChangeType.EXPORT)
+        return;
+    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),
+        },
+    });
+    const data = await detailsModal?.onSubmit().catch(() => {
+        return;
+    });
+    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;
+		}
+	`;
+__decorate([
+    property({ type: Array })
+], uSyncResultsView.prototype, "results", void 0);
+__decorate([
+    property({ type: Boolean })
+], uSyncResultsView.prototype, "hideResultBar", void 0);
+__decorate([
+    property({ type: Boolean })
+], uSyncResultsView.prototype, "hideActions", void 0);
+__decorate([
+    state()
+], uSyncResultsView.prototype, "showAll", void 0);
+__decorate([
+    state()
+], uSyncResultsView.prototype, "changeCount", void 0);
+uSyncResultsView = __decorate([
+    customElement('usync-results')
+], uSyncResultsView);
+export { uSyncResultsView };
+export default uSyncResultsView;

package/dist/components/usync-sync-file-info-view.d.ts

@@ -0,0 +1,15 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { SyncFileVersionCheckResult } from '../api';
+import { nothing } from '@umbraco-cms/backoffice/external/lit';
+export declare class uSyncSyncFileInfoView extends UmbLitElement {
+    #private;
+    _syncFileInfo?: SyncFileVersionCheckResult;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles?: import("lit").CSSResult[] | undefined;
+}
+export default uSyncSyncFileInfoView;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-sync-file-info': uSyncSyncFileInfoView;
+    }
+}

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

@@ -0,0 +1,62 @@
+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 _uSyncSyncFileInfoView_instances, _uSyncSyncFileInfoView_renderHmacMismatch, _uSyncSyncFileInfoView_renderFormatMismatch;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { customElement, property } from 'lit/decorators.js';
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit';
+let uSyncSyncFileInfoView = class uSyncSyncFileInfoView extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncSyncFileInfoView_instances.add(this);
+    }
+    render() {
+        if (!this._syncFileInfo)
+            return nothing;
+        return html `${__classPrivateFieldGet(this, _uSyncSyncFileInfoView_instances, "m", _uSyncSyncFileInfoView_renderHmacMismatch).call(this)} ${__classPrivateFieldGet(this, _uSyncSyncFileInfoView_instances, "m", _uSyncSyncFileInfoView_renderFormatMismatch).call(this)}`;
+    }
+};
+_uSyncSyncFileInfoView_instances = new WeakSet();
+_uSyncSyncFileInfoView_renderHmacMismatch = function _uSyncSyncFileInfoView_renderHmacMismatch() {
+    if (!this._syncFileInfo)
+        return nothing;
+    if (this._syncFileInfo.hmacMatch)
+        return nothing;
+    return html `<div class="banner">
+			<umb-localize key="uSync_hmacMismatch"></umb-localize>
+		</div>`;
+};
+_uSyncSyncFileInfoView_renderFormatMismatch = function _uSyncSyncFileInfoView_renderFormatMismatch() {
+    if (!this._syncFileInfo)
+        return nothing;
+    if (this._syncFileInfo.isCurrent)
+        return nothing;
+    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);
+			}
+		`,
+];
+__decorate([
+    property({ type: Object })
+], uSyncSyncFileInfoView.prototype, "_syncFileInfo", void 0);
+uSyncSyncFileInfoView = __decorate([
+    customElement('usync-sync-file-info')
+], uSyncSyncFileInfoView);
+export { uSyncSyncFileInfoView };
+export default uSyncSyncFileInfoView;

package/dist/conditions/constants.d.ts

@@ -0,0 +1 @@
+export declare const USYNC_CONDITION_NEW_SECTION = "usync.condition.new-section";

package/dist/conditions/constants.js

@@ -0,0 +1 @@
+export const USYNC_CONDITION_NEW_SECTION = 'usync.condition.new-section';

package/dist/conditions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './legacy-files.condition.js';
+export * from './new-section.condition.js';

package/dist/conditions/index.js

@@ -0,0 +1,2 @@
+export * from './legacy-files.condition.js';
+export * from './new-section.condition.js';

package/dist/conditions/legacy-files.condition.d.ts

@@ -0,0 +1,10 @@
+import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbConditionConfigBase, UmbConditionControllerArguments } from '@umbraco-cms/backoffice/extension-api';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+export type SyncLegacyFilesConditionConfig = UmbConditionConfigBase & {
+    hasLegacyFiles: boolean;
+};
+export declare class SyncLegacyFilesCondition extends UmbConditionBase<SyncLegacyFilesConditionConfig> {
+    config: SyncLegacyFilesConditionConfig;
+    constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<SyncLegacyFilesConditionConfig>);
+}

package/dist/conditions/legacy-files.condition.js

@@ -0,0 +1,16 @@
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+import { USYNC_CORE_CONTEXT_TOKEN } from '@jumoo/uSync';
+export class SyncLegacyFilesCondition extends UmbConditionBase {
+    constructor(host, args) {
+        super(host, args);
+        this.config = args.config;
+        this.consumeContext(USYNC_CORE_CONTEXT_TOKEN, (_instance) => {
+            if (!_instance)
+                return;
+            // consuming the context means it only happens when the context exists.
+            _instance.checkLegacy().then((response) => {
+                this.permitted = response?.hasLegacy ?? false;
+            });
+        });
+    }
+}

package/dist/conditions/manifest.d.ts

@@ -0,0 +1 @@
+export declare const manifests: UmbExtensionManifest[];

package/dist/conditions/manifest.js

@@ -0,0 +1,18 @@
+import { SyncLegacyFilesCondition } from '@jumoo/uSync';
+import { uSyncConstants } from '@jumoo/uSync';
+import { USYNC_CONDITION_NEW_SECTION } from './constants';
+import { SyncNewSectionCondition } from './new-section.condition';
+export const manifests = [
+    {
+        type: 'condition',
+        alias: uSyncConstants.conditions.legacy,
+        name: 'uSync Legacy Files Condition',
+        api: SyncLegacyFilesCondition,
+    },
+    {
+        type: 'condition',
+        alias: USYNC_CONDITION_NEW_SECTION,
+        name: 'uSync New Section Condition',
+        api: SyncNewSectionCondition,
+    },
+];

package/dist/conditions/new-section.condition.d.ts

@@ -0,0 +1,8 @@
+import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbConditionConfigBase, UmbConditionControllerArguments } from '@umbraco-cms/backoffice/extension-api';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+export type SyncNewSectionConditionConfig = UmbConditionConfigBase & {};
+export declare class SyncNewSectionCondition extends UmbConditionBase<SyncNewSectionConditionConfig> {
+    #private;
+    constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<SyncNewSectionConditionConfig>);
+}

package/dist/conditions/new-section.condition.js

@@ -0,0 +1,48 @@
+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 _SyncNewSectionCondition_instances, _SyncNewSectionCondition_currentSection, _SyncNewSectionCondition_allSections, _SyncNewSectionCondition_checkPermission;
+import { UmbExtensionsManifestInitializer, } from '@umbraco-cms/backoffice/extension-api';
+import { UmbConditionBase, umbExtensionsRegistry, } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section';
+import { USYNC_SECTION_ALIAS } from '../tree/constants';
+export class SyncNewSectionCondition extends UmbConditionBase {
+    constructor(host, args) {
+        super(host, args);
+        _SyncNewSectionCondition_instances.add(this);
+        _SyncNewSectionCondition_currentSection.set(this, void 0);
+        _SyncNewSectionCondition_allSections.set(this, void 0);
+        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'section', () => true, async (sections) => {
+            __classPrivateFieldSet(this, _SyncNewSectionCondition_allSections, sections.map((section) => section.alias), "f");
+            this.permitted = __classPrivateFieldGet(this, _SyncNewSectionCondition_instances, "m", _SyncNewSectionCondition_checkPermission).call(this);
+        }, 'uSyncAllSectionsManifestFilter');
+        this.consumeContext(UMB_SECTION_CONTEXT, (_context) => {
+            if (!_context)
+                return;
+            this.observe(_context.alias, (_alias) => {
+                __classPrivateFieldSet(this, _SyncNewSectionCondition_currentSection, _alias, "f");
+                this.permitted = __classPrivateFieldGet(this, _SyncNewSectionCondition_instances, "m", _SyncNewSectionCondition_checkPermission).call(this);
+            });
+        });
+    }
+}
+_SyncNewSectionCondition_currentSection = new WeakMap(), _SyncNewSectionCondition_allSections = new WeakMap(), _SyncNewSectionCondition_instances = new WeakSet(), _SyncNewSectionCondition_checkPermission = function _SyncNewSectionCondition_checkPermission() {
+    if (!__classPrivateFieldGet(this, _SyncNewSectionCondition_currentSection, "f"))
+        return false;
+    if (!__classPrivateFieldGet(this, _SyncNewSectionCondition_allSections, "f"))
+        return false;
+    // if the new section isn't defined, this will still show in settings.
+    if (!__classPrivateFieldGet(this, _SyncNewSectionCondition_allSections, "f").includes(USYNC_SECTION_ALIAS))
+        return true;
+    if (__classPrivateFieldGet(this, _SyncNewSectionCondition_currentSection, "f") === USYNC_SECTION_ALIAS)
+        return true;
+    return false;
+};

package/dist/constants.d.ts

@@ -0,0 +1,30 @@
+export declare const uSyncConstants: {
+    name: string;
+    path: string;
+    icon: string;
+    menuName: string;
+    menuAlias: string;
+    version: string;
+    conditions: {
+        legacy: string;
+    };
+    workspace: {
+        alias: string;
+        rootElement: string;
+        elementName: string;
+        contextAlias: string;
+        defaultView: {
+            alias: string;
+        };
+        settingView: {
+            alias: string;
+        };
+        addOnView: {
+            alias: string;
+        };
+        legacyView: {
+            alias: string;
+        };
+    };
+};
+export declare const uSyncTimeFormatOptions: Intl.DateTimeFormatOptions;

package/dist/constants.js

@@ -0,0 +1,38 @@
+const _constants = {
+    name: 'uSync',
+    path: 'usync',
+    icon: 'icon-infinity',
+    menuName: 'Syncronisation',
+    menuAlias: 'usync.menu',
+    version: '17.x',
+    conditions: {
+        legacy: 'usync.legacy.condition',
+    },
+    workspace: {
+        alias: 'usync.workspace',
+        rootElement: 'usync-root',
+        elementName: 'usync-workspace-root',
+        contextAlias: 'usync.workspace.context',
+        defaultView: {
+            alias: 'usync.workspace.default',
+        },
+        settingView: {
+            alias: 'usync.workspace.settings',
+        },
+        addOnView: {
+            alias: 'usync.workspace.addons',
+        },
+        legacyView: {
+            alias: 'usync.workspace.legacy',
+        },
+    },
+};
+export const uSyncConstants = _constants;
+export const uSyncTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+};

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

@@ -0,0 +1,18 @@
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { nothing } from '@umbraco-cms/backoffice/external/lit';
+import { uSyncDetailsModalData, uSyncDetailsModalValue } from '@jumoo/uSync';
+import { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
+export declare class uSyncDetailsModalElement extends UmbModalBaseElement<uSyncDetailsModalData, uSyncDetailsModalValue> {
+    #private;
+    importState: UUIButtonState;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    renderActions(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncDetailsModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-details-modal': uSyncDetailsModalElement;
+    }
+}

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

@@ -0,0 +1,98 @@
+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 _uSyncDetailsModalElement_instances, _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';
+let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBaseElement {
+    constructor() {
+        super();
+        _uSyncDetailsModalElement_instances.add(this);
+        // this.consumeContext(USYNC_CORE_CONTEXT_TOKEN, (_instance) => {
+        // 	if (!_instance) return;
+        // 	this.#actionContext = _instance;
+        // });
+    }
+    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>
+		`;
+    }
+    renderActions() {
+        if (!this.data?.showActions)
+            return nothing;
+        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_instances = new WeakSet();
+_uSyncDetailsModalElement_onImport = async function _uSyncDetailsModalElement_onImport(e) {
+    e.stopPropagation();
+    if (!this.data?.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 },
+    });
+    const data = await modal?.onSubmit().catch(() => {
+        return;
+    });
+    return data;
+};
+_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;
+		}
+	`;
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "importState", void 0);
+uSyncDetailsModalElement = __decorate([
+    customElement('usync-details-modal')
+], uSyncDetailsModalElement);
+export { uSyncDetailsModalElement };
+export default uSyncDetailsModalElement;

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

@@ -0,0 +1,10 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import { USyncActionView } from '@jumoo/uSync';
+export interface uSyncDetailsModalData {
+    item: USyncActionView;
+    showActions?: boolean;
+}
+export interface uSyncDetailsModalValue {
+    result: boolean;
+}
+export declare const USYNC_DETAILS_MODAL: UmbModalToken<uSyncDetailsModalData, uSyncDetailsModalValue>;

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

@@ -0,0 +1,7 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+export const USYNC_DETAILS_MODAL = new UmbModalToken('usync.details.modal', {
+    modal: {
+        type: 'sidebar',
+        size: 'large',
+    },
+});

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

@@ -0,0 +1,7 @@
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { uSyncErrorModalData, uSyncErrorModalValue } from './error-modal-token';
+export default class uSyncErrorModalElement extends UmbModalBaseElement<uSyncErrorModalData, uSyncErrorModalValue> {
+    #private;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

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

@@ -0,0 +1,54 @@
+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 _uSyncErrorModalElement_instances, _uSyncErrorModalElement_onClose;
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+let uSyncErrorModalElement = class uSyncErrorModalElement extends UmbModalBaseElement {
+    constructor() {
+        super(...arguments);
+        _uSyncErrorModalElement_instances.add(this);
+    }
+    render() {
+        const headline = `Error: ${this.data?.action.name ?? ''} [${this.data?.action.itemType}]`;
+        return html `<umb-body-layout .headline=${headline}>
+			<strong>
+				<umb-localize key="uSync_errorHeader"></umb-localize>
+			</strong>
+			<div class="error">${this.data?.action.message}</div>
+			<div slot="actions">
+				<uui-button
+					id="cancel"
+					.label=${this.localize.term('general_close')}
+					@click="${__classPrivateFieldGet(this, _uSyncErrorModalElement_instances, "m", _uSyncErrorModalElement_onClose)}"></uui-button>
+			</div>
+		</umb-body-layout>`;
+    }
+};
+_uSyncErrorModalElement_instances = new WeakSet();
+_uSyncErrorModalElement_onClose = function _uSyncErrorModalElement_onClose() {
+    this.modalContext?.reject();
+};
+uSyncErrorModalElement.styles = css `
+		umb-body-layout {
+			max-width: 450px;
+		}
+
+		.error {
+			padding: 10px;
+			font-family: monospace;
+			color: red;
+		}
+	`;
+uSyncErrorModalElement = __decorate([
+    customElement('usync-error-modal')
+], uSyncErrorModalElement);
+export default uSyncErrorModalElement;