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

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

@@ -19,7 +19,8 @@ var _uSyncContentTypePreviewElement_instances, _uSyncContentTypePreviewElement_s
 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 { getPreviewModel } from '../preview/types.js';
+import { previewSideStyles, renderPreviewHeadline, } from './preview-side.js';
+import { getPreviewModel, } from '../preview/types.js';
 import { buildContentTypeLayout, compositionIds, } from '../utils/preview/content-type-layout.js';
 import { diffContentTypes, } from '../utils/preview/content-type-diff.js';
 const KIND_LABELS = {
@@ -65,8 +66,8 @@ let uSyncContentTypePreviewElement = class uSyncContentTypePreviewElement extend
             return nothing;
         return html `
 			<div class="sides">
-				${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").current)}
 				${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderSide).call(this, 'incoming', __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").incoming)}
+				${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").current)}
 			</div>
 		`;
     }
@@ -79,20 +80,17 @@ _uSyncContentTypePreviewElement_newCompositions = new WeakMap();
 _uSyncContentTypePreviewElement_diff = new WeakMap();
 _uSyncContentTypePreviewElement_instances = new WeakSet();
 _uSyncContentTypePreviewElement_renderSide = function _uSyncContentTypePreviewElement_renderSide(side, type) {
-    const headline = side === 'current'
-        ? this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)')
-        : this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)');
     if (!type) {
-        return html `<div class="side">
-				<h4 class="side-headline">${headline}</h4>
+        return html `<div class="side ${side}">
+				${renderPreviewHeadline(this, side, this.labels)}
 				<uui-box class="info"><p class="empty">${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_missingMessage).call(this, side)}</p></uui-box>
 			</div>`;
     }
     const tabs = buildContentTypeLayout(type, __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_compositions, "f"));
     const active = tabs.find((t) => t.name === this._activeTab) ?? tabs[0];
     return html `
-			<div class="side">
-				<h4 class="side-headline">${headline}</h4>
+			<div class="side ${side}">
+				${renderPreviewHeadline(this, side, this.labels)}
 				${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderInfo).call(this, type)}
 				${tabs.length > 1 || (tabs.length === 1 && tabs[0].name)
         ? html `<uui-tab-group>
@@ -297,229 +295,227 @@ _uSyncContentTypePreviewElement_renderBadge = function _uSyncContentTypePreviewE
 			>${change.status}</uui-tag
 		>`;
 };
-uSyncContentTypePreviewElement.styles = css `
-		:host {
-			display: block;
-			container-type: inline-size;
-		}
-
-		/* the two sides share rows (headline, info, tabs, content), so the
-		   tab bars and groups 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;
-		}
-
-		/* info boxes match heights across the sides (but a lone "not here" box doesn't stretch). */
-		.side > .info:not(:last-child) {
-			align-self: stretch;
-		}
-
-		@container (max-width: 760px) {
+uSyncContentTypePreviewElement.styles = [
+    previewSideStyles,
+    css `
+			:host {
+				display: block;
+				container-type: inline-size;
+			}
+
+			/* the two sides share rows (headline, info, tabs, content), so the
+			   tab bars and groups line up even when the info boxes differ. */
 			.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: grid;
+				grid-row: span 4;
+				grid-template-rows: subgrid;
+				align-items: start;
+				min-width: 0;
+			}
+
+			/* info boxes match heights across the sides (but a lone "not here" box doesn't stretch). */
+			.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 {
+					display: flex;
+					flex-direction: column;
+					align-items: stretch;
+					gap: var(--uui-size-space-4);
+					grid-row: auto;
+				}
+			}
+
+			umb-property-dataset {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+				min-width: 0;
+			}
+
+			.headline {
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+				gap: var(--uui-size-space-2) var(--uui-size-space-3);
+			}
+
+			.headline code {
+				font-size: var(--uui-type-small-size);
+				color: var(--uui-color-text-alt);
+			}
+
+			.info-body {
 				display: flex;
 				flex-direction: column;
-				align-items: stretch;
 				gap: var(--uui-size-space-4);
-				grid-row: auto;
-			}
-		}
-
-		umb-property-dataset {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-			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);
-		}
-
-		.headline {
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-			gap: var(--uui-size-space-2) var(--uui-size-space-3);
-		}
-
-		.headline code {
-			font-size: var(--uui-type-small-size);
-			color: var(--uui-color-text-alt);
-		}
-
-		.info-body {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-		}
-
-		.tags {
-			display: flex;
-			flex-wrap: wrap;
-			gap: var(--uui-size-space-2);
-		}
-
-		.description {
-			margin: 0;
-		}
-
-		.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;
-		}
-
-		.meta dt {
-			font-weight: 700;
-		}
-
-		.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(uui-box) {
-			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.added {
-			background: var(--uui-color-positive);
-		}
-
-		.dot.removed {
-			background: var(--uui-color-danger);
-		}
-
-		.dot.changed {
-			background: var(--uui-color-warning);
-		}
-
-		uui-box.added {
-			border-left: 3px solid var(--uui-color-positive);
-		}
-
-		uui-box.removed {
-			border-left: 3px solid var(--uui-color-danger);
-		}
-
-		uui-box.changed {
-			border-left: 3px solid 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: var(--uui-size-space-4) var(--uui-size-space-5) 0;
-			margin: 0 calc(-1 * var(--uui-size-space-5));
-		}
-
-		.property:first-child,
-		.headline + .property {
-			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);
-		}
-
-		.property-meta {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: center;
-			gap: var(--uui-size-space-2) var(--uui-size-space-3);
-			font-size: var(--uui-type-small-size);
-			color: var(--uui-color-text-alt);
-		}
-
-		.property-meta code {
-			color: var(--uui-color-text);
-		}
-
-		.inherited {
-			font-style: italic;
-			color: var(--uui-color-text-alt);
-		}
-
-		.empty {
-			margin: 0;
-			color: var(--uui-color-text-alt);
-		}
-	`;
+			}
+
+			.tags {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--uui-size-space-2);
+			}
+
+			.description {
+				margin: 0;
+			}
+
+			.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;
+			}
+
+			.meta dt {
+				font-weight: 700;
+			}
+
+			.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(uui-box) {
+				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);
+			}
+
+			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.added {
+				background: var(--uui-color-positive);
+			}
+
+			.dot.removed {
+				background: var(--uui-color-danger);
+			}
+
+			.dot.changed {
+				background: var(--uui-color-warning);
+			}
+
+			uui-box.added {
+				border-left: 3px solid var(--uui-color-positive);
+			}
+
+			uui-box.removed {
+				border-left: 3px solid var(--uui-color-danger);
+			}
+
+			uui-box.changed {
+				border-left: 3px solid var(--usync-preview-change);
+			}
+
+			/* 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(--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: var(--uui-size-space-4) var(--uui-size-space-5) 0;
+				margin: 0 calc(-1 * var(--uui-size-space-5));
+			}
+
+			.property:first-child,
+			.headline + .property {
+				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);
+			}
+
+			.property-meta {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: var(--uui-size-space-2) var(--uui-size-space-3);
+				font-size: var(--uui-type-small-size);
+				color: var(--uui-color-text-alt);
+			}
+
+			.property-meta code {
+				color: var(--uui-color-text);
+			}
+
+			.inherited {
+				font-style: italic;
+				color: var(--uui-color-text-alt);
+			}
+
+			.empty {
+				margin: 0;
+				color: var(--uui-color-text-alt);
+			}
+		`,
+];
 __decorate([
     property({ type: Object })
 ], uSyncContentTypePreviewElement.prototype, "preview", void 0);
+__decorate([
+    property({ type: Object })
+], uSyncContentTypePreviewElement.prototype, "labels", void 0);
 __decorate([
     state()
 ], uSyncContentTypePreviewElement.prototype, "_activeTab", void 0);

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

@@ -2,6 +2,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { 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 data type side by side,
  * rendered with the real property editor, so you can see what an import
@@ -10,8 +11,9 @@ import type { SyncItemPreviewResponse } from '../api';
 export declare class uSyncDataTypePreviewElement extends UmbLitElement {
     #private;
     preview?: SyncItemPreviewResponse;
+    labels?: uSyncPreviewLabels;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 export default uSyncDataTypePreviewElement;
 declare global {