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

package/dist/components/preview-side.d.ts

@@ -0,0 +1,16 @@
+import type { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { uSyncPreviewLabels } from '../preview/types.js';
+export type PreviewSide = 'current' | 'incoming';
+/** the headline over one side of a preview. */
+export declare function renderPreviewHeadline(host: UmbLitElement, side: PreviewSide, labels?: uSyncPreviewLabels): import("lit-html").TemplateResult<1>;
+/**
+ * styles shared by the sides of a preview (each side is `.side.current` or `.side.incoming`).
+ *
+ * the incoming side (the source) is always on the left, and the current side (the
+ * target, which the import changes) on the right.
+ *
+ * what differs is red on the current side (what goes) and green on the incoming
+ * side (what comes in), so you can see which way the change runs whichever way
+ * round the sites are. elements colour their changes with `--usync-preview-change`.
+ */
+export declare const previewSideStyles: import("lit").CSSResult;

package/dist/components/preview-side.js

@@ -0,0 +1,38 @@
+import { css, html } from '@umbraco-cms/backoffice/external/lit';
+/** the headline over one side of a preview. */
+export function renderPreviewHeadline(host, side, labels) {
+    const headline = side === 'current'
+        ? (labels?.current ??
+            host.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)'))
+        : (labels?.incoming ??
+            host.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)'));
+    return html `<h4 class="side-headline">${headline}</h4>`;
+}
+/**
+ * styles shared by the sides of a preview (each side is `.side.current` or `.side.incoming`).
+ *
+ * the incoming side (the source) is always on the left, and the current side (the
+ * target, which the import changes) on the right.
+ *
+ * what differs is red on the current side (what goes) and green on the incoming
+ * side (what comes in), so you can see which way the change runs whichever way
+ * round the sites are. elements colour their changes with `--usync-preview-change`.
+ */
+export const previewSideStyles = css `
+	.side.current {
+		--usync-preview-change: var(--uui-color-danger);
+	}
+
+	.side.incoming {
+		--usync-preview-change: var(--uui-color-positive);
+	}
+
+	.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);
+	}
+`;

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

@@ -2,6 +2,7 @@ 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';
+import { type uSyncPreviewLabels } from '../preview/types.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
@@ -10,6 +11,7 @@ import type { SyncItemPreviewResponse } from '../api';
 export declare class uSyncContentPreviewElement extends UmbLitElement {
     #private;
     preview?: SyncItemPreviewResponse;
+    labels?: uSyncPreviewLabels;
     /** the tab shown on both sides (by name) */
     private _activeTab?;
     /** the culture shown on both sides (undefined for invariant items) */
@@ -17,7 +19,7 @@ export declare class uSyncContentPreviewElement extends UmbLitElement {
     private _onlyChanges;
     protected willUpdate(changed: PropertyValues<this>): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 export default uSyncContentPreviewElement;
 declare global {

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

@@ -19,6 +19,7 @@ var _uSyncContentPreviewElement_instances, _uSyncContentPreviewElement_current,
 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 { previewSideStyles, renderPreviewHeadline, } from './preview-side.js';
 import { getPreviewModel, } from '../preview/types.js';
 import { buildContentTypeLayout, } from '../utils/preview/content-type-layout.js';
 import { deepEqual } from '../utils/diff/deep-equal.js';
@@ -71,8 +72,8 @@ let uSyncContentPreviewElement = class uSyncContentPreviewElement extends UmbLit
         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)}
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f"), tabs, active)}
 			</div>
 		`;
     }
@@ -109,18 +110,15 @@ _uSyncContentPreviewElement_renderToolbar = function _uSyncContentPreviewElement
 		</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>
+				${renderPreviewHeadline(this, side, this.labels)}
 				<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>
+				${renderPreviewHeadline(this, side, this.labels)}
 				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderInfo).call(this, data)}
 				${tabs.length > 1 || (tabs.length === 1 && tabs[0].name)
         ? html `<uui-tab-group>
@@ -304,208 +302,198 @@ _uSyncContentPreviewElement_valueStatus = function _uSyncContentPreviewElement_v
         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;
-		}
+uSyncContentPreviewElement.styles = [
+    previewSideStyles,
+    css `
+			:host {
+				display: block;
+				container-type: inline-size;
+			}
 
-		.side.current {
-			grid-column: 1;
-			grid-row: 1 / span 4;
-		}
+			/* the toolbar shares the headline row with the current 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);
+			}
 
-		.side.incoming {
-			grid-column: 2;
-			grid-row: 1 / span 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 > .info:not(:last-child) {
-			align-self: stretch;
-		}
+			.side {
+				display: grid;
+				grid-row: span 4;
+				grid-template-rows: subgrid;
+				align-items: start;
+				min-width: 0;
+			}
 
-		@container (max-width: 760px) {
-			.sides {
-				grid-template-columns: 1fr;
-				grid-template-rows: none;
-				row-gap: var(--uui-size-layout-1);
+			.side.current {
+				grid-column: 2;
+				grid-row: 1 / span 4;
 			}
 
-			.side,
-			.side.current,
-			.side.incoming,
-			.toolbar {
+			.side.incoming {
 				grid-column: 1;
-				grid-row: auto;
+				grid-row: 1 / span 4;
 			}
 
-			.side {
-				display: flex;
-				flex-direction: column;
-				align-items: stretch;
-				gap: var(--uui-size-space-4);
+			.side > .info:not(:last-child) {
+				align-self: stretch;
 			}
 
-			.side > .side-headline {
-				align-self: auto;
-			}
-		}
+			@container (max-width: 760px) {
+				.sides {
+					grid-template-columns: 1fr;
+					grid-template-rows: none;
+					row-gap: var(--uui-size-layout-1);
+				}
 
-		umb-property-dataset {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-			min-width: 0;
-		}
+				.side,
+				.side.current,
+				.side.incoming,
+				.toolbar {
+					grid-column: 1;
+					grid-row: auto;
+				}
 
-		.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);
-		}
+				.side {
+					display: flex;
+					flex-direction: column;
+					align-items: stretch;
+					gap: var(--uui-size-space-4);
+				}
 
-		.headline {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-3);
-		}
+				.side > .side-headline {
+					align-self: auto;
+				}
+			}
 
-		.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);
-		}
+			umb-property-dataset {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+				min-width: 0;
+			}
 
-		.meta dt {
-			font-weight: 700;
-		}
+			.headline {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-3);
+			}
 
-		.tags {
-			display: inline-flex;
-			flex-wrap: wrap;
-			gap: var(--uui-size-space-2);
-		}
+			.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 dd {
-			display: flex;
-			flex-wrap: wrap;
-			gap: var(--uui-size-space-2);
-			margin: 0;
-		}
+			.meta dt {
+				font-weight: 700;
+			}
 
-		/* 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);
-		}
+			.tags {
+				display: inline-flex;
+				flex-wrap: wrap;
+				gap: var(--uui-size-space-2);
+			}
 
-		uui-tab-group {
-			--uui-tab-divider: var(--uui-color-border);
-			border-bottom: 1px solid var(--uui-color-border);
-		}
+			.meta dd {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--uui-size-space-2);
+				margin: 0;
+			}
 
-		.tab-label {
-			display: inline-flex;
-			align-items: center;
-			gap: var(--uui-size-space-2);
-			white-space: nowrap;
-		}
+			/* 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(--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);
+			}
 
-		.dot {
-			display: inline-block;
-			width: 8px;
-			height: 8px;
-			border-radius: 50%;
-		}
+			uui-tab-group {
+				--uui-tab-divider: var(--uui-color-border);
+				border-bottom: 1px solid var(--uui-color-border);
+			}
 
-		.dot.changed {
-			background: var(--uui-color-warning);
-		}
+			.tab-label {
+				display: inline-flex;
+				align-items: center;
+				gap: var(--uui-size-space-2);
+				white-space: nowrap;
+			}
 
-		/* 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);
-		}
+			.dot {
+				display: inline-block;
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+			}
 
-		.property.removed {
-			box-shadow: inset 3px 0 0 var(--uui-color-danger);
-			background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
-		}
+			.dot.changed {
+				background: var(--uui-color-warning);
+			}
 
-		.property.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.
+			   the colour is the side's (red going, green coming in), whatever the change. */
+			.property.added,
+			.property.removed,
+			.property.changed {
+				box-shadow: inset 3px 0 0 var(--usync-preview-change);
+				background: color-mix(in srgb, var(--usync-preview-change) 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));
-		}
+			/* 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:first-child {
+				margin-top: calc(-1 * var(--uui-size-space-5));
+			}
 
-		.property:last-child {
-			margin-bottom: 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);
-		}
+			.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);
-		}
+			/* 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);
-		}
-	`;
+			.empty {
+				margin: 0;
+				color: var(--uui-color-text-alt);
+			}
+		`,
+];
 __decorate([
     property({ type: Object })
 ], uSyncContentPreviewElement.prototype, "preview", void 0);
+__decorate([
+    property({ type: Object })
+], uSyncContentPreviewElement.prototype, "labels", void 0);
 __decorate([
     state()
 ], uSyncContentPreviewElement.prototype, "_activeTab", void 0);

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

@@ -2,6 +2,7 @@ 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';
+import { type uSyncPreviewLabels } from '../preview/types.js';
 /**
  * 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
@@ -11,11 +12,12 @@ import type { SyncItemPreviewResponse } from '../api';
 export declare class uSyncContentTypePreviewElement extends UmbLitElement {
     #private;
     preview?: SyncItemPreviewResponse;
+    labels?: uSyncPreviewLabels;
     /** 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;
+    static styles: import("lit").CSSResult[];
 }
 export default uSyncContentTypePreviewElement;
 declare global {