@jumoo/usync 17.5.1 → 17.5.2-prerelease.15

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

@@ -0,0 +1,540 @@
+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 { 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 preview = this.preview;
+        const isMedia = preview.entityType === 'media';
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_current, {
+            item: (isMedia ? preview.currentMedia : preview.currentDocument) ?? undefined,
+            info: preview.currentInfo,
+        }, "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_incoming, {
+            item: (isMedia ? preview.incomingMedia : preview.incomingDocument) ?? undefined,
+            info: preview.incomingInfo,
+        }, "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_type, (isMedia ? preview.currentMediaType : preview.currentDocumentType) ?? undefined, "f");
+        const compositions = isMedia
+            ? preview.compositionMediaTypes
+            : preview.compositionDocumentTypes;
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_compositions, new Map(compositions.map((c) => [c.id, c])), "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_dataTypes, new Map(preview.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;

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

@@ -0,0 +1,25 @@
+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 document, media or member
+ * type side by side, laid out the way the backoffice editor shows them, with
+ * every property rendered by its real property editor. Added, removed and
+ * changed tabs, groups and properties are highlighted.
+ */
+export declare class uSyncContentTypePreviewElement extends UmbLitElement {
+    #private;
+    preview?: SyncItemPreviewResponse;
+    /** the tab shown on both sides (by name, so it lines up when ids differ) */
+    private _activeTab?;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncContentTypePreviewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-content-type-preview': uSyncContentTypePreviewElement;
+    }
+}