@jumoo/usync 17.6.1-prerelease.19 → 17.6.1-prerelease.21

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

@@ -13,7 +13,8 @@ var _uSyncDataTypePreviewElement_instances, _uSyncDataTypePreviewElement_renderS
 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 { getPreviewModel } from '../preview/types.js';
+import { previewSideStyles, renderPreviewHeadline, } from './preview-side.js';
+import { getPreviewModel, } from '../preview/types.js';
 import { deepEqual, prettyJson } from '../utils/diff/index.js';
 /**
  * Shows the current and incoming versions of a data type side by side,
@@ -33,20 +34,17 @@ let uSyncDataTypePreviewElement = class uSyncDataTypePreviewElement extends UmbL
         const incoming = model?.incoming ?? 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)}
+				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'current', current, incoming)}
 			</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>
+			<div class="side ${side}">
+				${renderPreviewHeadline(this, side, this.labels)}
 				${dataType
         ? html `
 								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderInfo).call(this, dataType, other)} ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderEditor).call(this, dataType)}
@@ -127,151 +125,149 @@ _uSyncDataTypePreviewElement_renderConfig = function _uSyncDataTypePreviewElemen
 			</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;
-		}
+uSyncDataTypePreviewElement.styles = [
+    previewSideStyles,
+    css `
+			:host {
+				display: block;
+				container-type: inline-size;
+			}
 
-		@container (max-width: 760px) {
+			/* the two sides share rows (headline, info, editor, config), so the
+			   boxes line up across the sides. */
 			.sides {
-				grid-template-columns: 1fr;
-				grid-template-rows: none;
-				row-gap: var(--uui-size-layout-1);
+				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: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-				grid-row: auto;
+				display: grid;
+				grid-row: span 4;
+				grid-template-rows: subgrid;
+				min-width: 0;
 			}
-		}
 
-		.side-headline {
-			margin: 0;
-			font-size: var(--uui-type-small-size);
-			text-transform: uppercase;
-			letter-spacing: 0.04em;
-			color: var(--uui-color-text-alt);
-		}
+			.side > :last-child {
+				align-self: start;
+			}
 
-		.headline {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-3);
-		}
+			@container (max-width: 760px) {
+				.sides {
+					grid-template-columns: 1fr;
+					grid-template-rows: none;
+					row-gap: var(--uui-size-layout-1);
+				}
 
-		.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;
-		}
+				.side {
+					display: flex;
+					flex-direction: column;
+					gap: var(--uui-size-space-4);
+					grid-row: auto;
+				}
+			}
+
+			.headline {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-3);
+			}
 
-		.meta dt {
-			font-weight: 700;
-		}
+			.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;
-		}
+			.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);
-		}
+			/* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
+			.changed {
+				background: color-mix(in srgb, var(--usync-preview-change) 35%, transparent);
+				border-radius: var(--uui-border-radius);
+				box-shadow: 0 0 0 var(--uui-size-space-1)
+					color-mix(in srgb, var(--usync-preview-change) 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);
-		}
+			/* 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;
-		}
+			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);
-		}
+			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);
-		}
+			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;
-		}
+			/* 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);
-		}
+			th code,
+			td pre {
+				font-size: var(--uui-type-small-size);
+			}
 
-		td pre {
-			margin: 0;
-			white-space: pre-wrap;
-			word-break: break-word;
-		}
+			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);
-		}
+			/* 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(--usync-preview-change);
+				background: color-mix(in srgb, var(--usync-preview-change) 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-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);
-		}
+			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);
-		}
-	`;
+			.empty {
+				margin: 0;
+				color: var(--uui-color-text-alt);
+			}
+		`,
+];
 __decorate([
     property({ type: Object })
 ], uSyncDataTypePreviewElement.prototype, "preview", void 0);
+__decorate([
+    property({ type: Object })
+], uSyncDataTypePreviewElement.prototype, "labels", void 0);
 uSyncDataTypePreviewElement = __decorate([
     customElement('usync-data-type-preview')
 ], uSyncDataTypePreviewElement);

package/dist/components/usync-results-view.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { USyncActionView } from '@jumoo/uSync';
-import { uSyncPreviewSource } from '@jumoo/uSync';
+import { uSyncPreviewLabels, uSyncPreviewSource } from '@jumoo/uSync';
 declare const uSyncResultsView_base: import("@umbraco-cms/backoffice/extension-api").HTMLElementConstructor<import("@umbraco-cms/backoffice/element-api").UmbElement> & typeof LitElement;
 export declare class uSyncResultsView extends uSyncResultsView_base {
     #private;
@@ -13,6 +13,10 @@ export declare class uSyncResultsView extends uSyncResultsView_base {
      * items from this site's uSync folders (see uSyncDetailsModalData).
      */
     previewSource?: uSyncPreviewSource;
+    /**
+     * the headlines over the two sides of the preview (see uSyncDetailsModalData).
+     */
+    previewLabels?: uSyncPreviewLabels;
     showAll: boolean;
     changeCount: number;
     groupBy<T>(arr: T[], fn: (item: T) => any): Record<string, T[]>;

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

@@ -100,6 +100,7 @@ _uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
             item: e.action,
             items: __classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_visibleItems).call(this),
             previewSource: this.previewSource,
+            previewLabels: this.previewLabels,
             showActions: (item) => !this.hideActions &&
                 (item.change == ChangeType.CREATE ||
                     item.change == ChangeType.UPDATE ||
@@ -175,6 +176,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], uSyncResultsView.prototype, "previewSource", void 0);
+__decorate([
+    property({ attribute: false })
+], uSyncResultsView.prototype, "previewLabels", void 0);
 __decorate([
     state()
 ], uSyncResultsView.prototype, "showAll", void 0);

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

@@ -198,7 +198,7 @@ _uSyncDetailsModalElement_loadPreview = async function _uSyncDetailsModalElement
     if (data?.entityType) {
         const entityType = data.entityType;
         __classPrivateFieldSet(this, _uSyncDetailsModalElement_previewFilter, (manifest) => manifest.forEntityTypes.includes(entityType), "f");
-        __classPrivateFieldSet(this, _uSyncDetailsModalElement_previewProps, { preview: data }, "f");
+        __classPrivateFieldSet(this, _uSyncDetailsModalElement_previewProps, { preview: data, labels: this.data?.previewLabels }, "f");
         this._preview = data;
     }
 };

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

@@ -1,5 +1,5 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
-import { SyncItemPreviewResponse, USyncActionView } from '@jumoo/uSync';
+import { SyncItemPreviewResponse, USyncActionView, uSyncPreviewLabels } from '@jumoo/uSync';
 /**
  * where the details dialog gets the preview of an item from.
  *
@@ -25,6 +25,11 @@ export interface uSyncDetailsModalData {
      * the item from this site's uSync folders.
      */
     previewSource?: uSyncPreviewSource;
+    /**
+     * the headlines over the two sides of the preview, for a previewSource whose
+     * items don't come from this site's uSync folders.
+     */
+    previewLabels?: uSyncPreviewLabels;
 }
 export interface uSyncDetailsModalValue {
     result: boolean;

package/dist/preview/types.d.ts

@@ -1,11 +1,21 @@
 import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api';
 import type { DataTypeResponseModel, DocumentResponseModel, DocumentTypeResponseModel, MediaResponseModel, MediaTypeResponseModel, MemberTypeResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 import type { SyncItemPreviewResponse } from '../api';
+/**
+ * the headlines over the two sides of a preview, for callers whose items don't
+ * come from this site's uSync folders (e.g. 'Target site' and 'This site').
+ */
+export interface uSyncPreviewLabels {
+    current?: string;
+    incoming?: string;
+}
 /**
  * An element that shows the preview of an import for one or more entity types.
  */
 export interface uSyncItemPreviewElement extends HTMLElement {
     preview?: SyncItemPreviewResponse;
+    /** headlines for the two sides, when not set the element uses its own. */
+    labels?: uSyncPreviewLabels;
 }
 /**
  * Shows the preview for items of the given entity types in the details dialog.

package/package.json

@@ -8,7 +8,7 @@
 	"homepage": "https://jumoo.co.uk/uSync",
 	"license": "MPL-2.0",
 	"type": "module",
-	"version": "17.6.1-prerelease.19",
+	"version": "17.6.1-prerelease.21",
 	"main": "./dist/usync.js",
 	"types": "./dist/index.d.ts",
 	"module": "./dist/usync.js",