@jumoo/usync 17.5.0 → 17.5.2-prerelease.15

package/dist/utils/preview/content-type-layout.js

@@ -0,0 +1,100 @@
+/** name used for the tab that holds groups which aren't inside a tab */
+export const USYNC_GENERIC_TAB = '';
+/** the ids of the types this one is composed of (or inherits from). */
+export function compositionIds(type) {
+    return type.compositions.map((composition) => {
+        if ('documentType' in composition)
+            return composition.documentType.id;
+        if ('mediaType' in composition)
+            return composition.mediaType.id;
+        return composition.memberType.id;
+    });
+}
+/**
+ * build the tabs and groups an editor would see, merging in the containers
+ * and properties from compositions the way the backoffice does (by name).
+ */
+export function buildContentTypeLayout(type, compositions) {
+    const tabs = new Map();
+    const tabFor = (name, id, sortOrder, inherited) => {
+        let tab = tabs.get(name);
+        if (!tab) {
+            tab = { name, ids: [], inherited, sortOrder, properties: [], groups: [] };
+            tabs.set(name, tab);
+        }
+        if (id)
+            tab.ids.push(id);
+        tab.inherited && (tab.inherited = inherited);
+        return tab;
+    };
+    const groupFor = (tab, name, id, sortOrder, inherited) => {
+        let group = tab.groups.find((g) => g.name === name);
+        if (!group) {
+            group = { name, ids: [], inherited, sortOrder, properties: [] };
+            tab.groups.push(group);
+        }
+        group.ids.push(id);
+        group.inherited && (group.inherited = inherited);
+        return group;
+    };
+    for (const source of contributors(type, compositions)) {
+        const inherited = source !== type;
+        const containers = new Map(source.containers.map((c) => [c.id, c]));
+        // where each container (and so each property) lands in the merged layout.
+        const placed = new Map();
+        for (const container of [...source.containers].sort(bySortOrder)) {
+            if (container.type === 'Tab') {
+                placed.set(container.id, tabFor(container.name ?? '', container.id, container.sortOrder, inherited));
+            }
+        }
+        for (const container of [...source.containers].sort(bySortOrder)) {
+            if (container.type !== 'Group')
+                continue;
+            const parent = container.parent ? containers.get(container.parent.id) : undefined;
+            const tab = parent
+                ? tabFor(parent.name ?? '', undefined, parent.sortOrder, inherited)
+                : tabFor(USYNC_GENERIC_TAB, undefined, -1, inherited);
+            placed.set(container.id, groupFor(tab, container.name ?? '', container.id, container.sortOrder, inherited));
+        }
+        for (const property of [...source.properties].sort(bySortOrder)) {
+            const target = property.container ? placed.get(property.container.id) : undefined;
+            const entry = { property, inheritedFrom: inherited ? source.name : undefined };
+            if (target) {
+                target.properties.push(entry);
+            }
+            else {
+                tabFor(USYNC_GENERIC_TAB, undefined, -1, inherited).properties.push(entry);
+            }
+        }
+    }
+    const result = [...tabs.values()].sort(bySortOrder);
+    for (const tab of result) {
+        tab.groups.sort(bySortOrder);
+        tab.properties.sort((a, b) => a.property.sortOrder - b.property.sortOrder);
+        for (const group of tab.groups) {
+            group.properties.sort((a, b) => a.property.sortOrder - b.property.sortOrder);
+        }
+    }
+    return result.filter((tab) => tab.properties.length > 0 || tab.groups.length > 0);
+}
+/** the type itself first, then everything it is composed of (depth first, no repeats). */
+function contributors(type, compositions) {
+    const seen = new Set();
+    const out = [];
+    const visit = (current) => {
+        if (seen.has(current.id))
+            return;
+        seen.add(current.id);
+        out.push(current);
+        for (const id of compositionIds(current)) {
+            const composition = compositions.get(id);
+            if (composition)
+                visit(composition);
+        }
+    };
+    visit(type);
+    return out;
+}
+function bySortOrder(a, b) {
+    return a.sortOrder - b.sortOrder;
+}

package/dist/workspace/components/usync-action-button.js

@@ -21,55 +21,55 @@ let SyncActionButtonElement = class SyncActionButtonElement extends UmbLitElemen
         this._popoverOpen = false;
     }
     render() {
-        return html `
-			<uui-button-group>
-				<uui-button
-					class="action-button"
-					.disabled=${this.disabled}
-					label=${this.localize.termOrDefault(`uSync_${this.button?.label}`, this.button?.label ?? '')}
-					color=${this.button?.color}
-					look=${this.button?.look}
-					state=${ifDefined(this.state)}
-					@click=${() => __classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onClick).call(this, this.button)}></uui-button>
-
-				${this.renderDropdown(this.button)}
-			</uui-button-group>
+        return html `
+			<uui-button-group>
+				<uui-button
+					class="action-button"
+					.disabled=${this.disabled}
+					label=${this.localize.termOrDefault(`uSync_${this.button?.label}`, this.button?.label ?? '')}
+					color=${this.button?.color}
+					look=${this.button?.look}
+					state=${ifDefined(this.state)}
+					@click=${() => __classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onClick).call(this, this.button)}></uui-button>
+
+				${this.renderDropdown(this.button)}
+			</uui-button-group>
 		`;
     }
     renderDropdown(parent) {
         if (!this.button?.children)
             return nothing;
         const buttons = this.button?.children.map((item) => {
-            return html ` <uui-menu-item
-				.disabled=${this.disabled}
-				.label=${this.localize.termOrDefault(`uSync_${item.label}`, item.label)}
+            return html ` <uui-menu-item
+				.disabled=${this.disabled}
+				.label=${this.localize.termOrDefault(`uSync_${item.label}`, item.label)}
 				@click-label=${() => __classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onClick).call(this, item)}></uui-menu-item>`;
         });
         if (buttons.length == 0)
             return nothing;
         const popoverId = `popover_${parent?.key}`;
-        return html `
-			<uui-button
-				.disabled=${this.disabled}
-				popovertarget=${popoverId}
-				.label=${this.button.label}
-				color=${parent?.color}
-				look=${parent?.look}
-				compact>
-				<uui-symbol-expand
-					class="expand-symbol"
-					.open=${this._popoverOpen}></uui-symbol-expand>
-			</uui-button>
-
-			<uui-popover-container
-				id=${popoverId}
-				margin="6"
-				placement="bottom-end"
-				@toggle=${__classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onPopoverToggle)}>
-				<umb-popover-layout>
-					<uui-scroll-container> ${buttons} </uui-scroll-container>
-				</umb-popover-layout>
-			</uui-popover-container>
+        return html `
+			<uui-button
+				.disabled=${this.disabled}
+				popovertarget=${popoverId}
+				.label=${this.button.label}
+				color=${parent?.color}
+				look=${parent?.look}
+				compact>
+				<uui-symbol-expand
+					class="expand-symbol"
+					.open=${this._popoverOpen}></uui-symbol-expand>
+			</uui-button>
+
+			<uui-popover-container
+				id=${popoverId}
+				margin="6"
+				placement="bottom-end"
+				@toggle=${__classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onPopoverToggle)}>
+				<umb-popover-layout>
+					<uui-scroll-container> ${buttons} </uui-scroll-container>
+				</umb-popover-layout>
+			</uui-popover-container>
 		`;
     }
 };
@@ -82,18 +82,18 @@ _SyncActionButtonElement_onClick = function _SyncActionButtonElement_onClick(ite
 _SyncActionButtonElement_onPopoverToggle = function _SyncActionButtonElement_onPopoverToggle(e) {
     this._popoverOpen = e.newState === 'open';
 };
-SyncActionButtonElement.styles = css `
-		.action-button {
-			min-width: 110px;
-		}
-
-		.expand-symbol {
-			transform: rotate(90deg);
-		}
-
-		.expand-symbol[open] {
-			transform: rotate(180deg);
-		}
+SyncActionButtonElement.styles = css `
+		.action-button {
+			min-width: 110px;
+		}
+
+		.expand-symbol {
+			transform: rotate(90deg);
+		}
+
+		.expand-symbol[open] {
+			transform: rotate(180deg);
+		}
 	`;
 __decorate([
     property({ type: Object })

package/dist/workspace/components/usync-file-picker.element.js

@@ -38,53 +38,53 @@ let uSyncFilePicker = class uSyncFilePicker extends UmbLitElement {
         this.dispatchEvent(new uSyncFilePickerChangeEvent(this._file));
     }
     render() {
-        return html `<input
-				@click=${(e) => e.stopPropagation()}
-				type="file"
-				id="file"
-				this.accept=${this.accept}
-				@change=${this._onFilePickerChange} />
+        return html `<input
+				@click=${(e) => e.stopPropagation()}
+				type="file"
+				id="file"
+				this.accept=${this.accept}
+				@change=${this._onFilePickerChange} />
 			${this._renderFile()} ${this._renderButton()}`;
     }
     _renderFile() {
         if (!this._file)
             return nothing;
-        return html ` <div class="file">
-			<div>${this._file.name}</div>
-			<uui-button
-				@click="${() => this._removeFile()}"
-				compact
-				color="danger"
-				label="Remove">
-				<umb-icon name="icon-trash"></umb-icon>
-			</uui-button>
+        return html ` <div class="file">
+			<div>${this._file.name}</div>
+			<uui-button
+				@click="${() => this._removeFile()}"
+				compact
+				color="danger"
+				label="Remove">
+				<umb-icon name="icon-trash"></umb-icon>
+			</uui-button>
 		</div>`;
     }
     _renderButton() {
         return this._file
             ? nothing
-            : html ` <uui-button
-					id="add-button"
-					look="placeholder"
-					label=${this.label}
+            : html ` <uui-button
+					id="add-button"
+					look="placeholder"
+					label=${this.label}
 					@click="${this._onUpload}"></uui-button>`;
     }
 };
 uSyncFilePicker.styles = [
-    css `
-			.file {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-space-2);
-			}
-
-			#file {
-				display: none;
-			}
-
-			#add-button {
-				width: 100%;
-			}
+    css `
+			.file {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-2);
+			}
+
+			#file {
+				display: none;
+			}
+
+			#add-button {
+				width: 100%;
+			}
 		`,
 ];
 __decorate([

package/dist/workspace/components/usync-file-upload.element.js

@@ -46,22 +46,22 @@ let uSyncFileUploadElement = class uSyncFileUploadElement extends UmbLitElement
         return html ` ${this.renderFile()} ${this.renderUploadButton()} `;
     }
     renderFile() {
-        return html `
-			<div class="upload-box">
-				<usync-upload-file-picker
-					label="Select uSync Zip file"
-					@change=${__classPrivateFieldGet(this, _uSyncFileUploadElement_instances, "m", _uSyncFileUploadElement_onFileChange)}></usync-upload-file-picker>
-			</div>
+        return html `
+			<div class="upload-box">
+				<usync-upload-file-picker
+					label="Select uSync Zip file"
+					@change=${__classPrivateFieldGet(this, _uSyncFileUploadElement_instances, "m", _uSyncFileUploadElement_onFileChange)}></usync-upload-file-picker>
+			</div>
 		`;
     }
     renderUploadButton() {
         if (!this.selected)
             return nothing;
-        return html `<uui-button
-			type="button"
-			look="primary"
-			@click="${__classPrivateFieldGet(this, _uSyncFileUploadElement_instances, "m", _uSyncFileUploadElement_onUpload)}"
-			label="Upload"
+        return html `<uui-button
+			type="button"
+			look="primary"
+			@click="${__classPrivateFieldGet(this, _uSyncFileUploadElement_instances, "m", _uSyncFileUploadElement_onUpload)}"
+			label="Upload"
 			.state=${this.buttonState}></uui-button>`;
     }
 };
@@ -90,20 +90,20 @@ _uSyncFileUploadElement_uploadComplete = async function _uSyncFileUploadElement_
 _uSyncFileUploadElement_onFileChange = function _uSyncFileUploadElement_onFileChange(e) {
     this.selected = e.file;
 };
-uSyncFileUploadElement.styles = css `
-		:host {
-			display: flex;
-			justify-content: space-between;
-		}
-
-		.upload-box {
-			flex-grow: 2;
-		}
-
-		usync-upload-file-picker {
-			width: 100%;
-			flex-grow: 2;
-		}
+uSyncFileUploadElement.styles = css `
+		:host {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.upload-box {
+			flex-grow: 2;
+		}
+
+		usync-upload-file-picker {
+			width: 100%;
+			flex-grow: 2;
+		}
 	`;
 __decorate([
     state()

package/dist/workspace/dialogs/import-modal.element.js

@@ -18,30 +18,30 @@ let uSyncImportModalDialog = class uSyncImportModalDialog extends UmbModalBaseEl
         _uSyncImportModalDialog_instances.add(this);
     }
     render() {
-        return html `
-			<umb-body-layout .headline=${this.localize.termOrDefault('uSync_importHeader', 'Import from file')}>
-				${this.renderForm()} ${this.renderResult()}
-			</umb-body-layout>
+        return html `
+			<umb-body-layout .headline=${this.localize.termOrDefault('uSync_importHeader', 'Import from file')}>
+				${this.renderForm()} ${this.renderResult()}
+			</umb-body-layout>
 		`;
     }
     renderForm() {
         if (this.result !== undefined)
             return;
-        return html ` ${this.localize.termOrDefault('uSync_uploadIntro', 'Select a zip file containing uSync files that you want to upload')}
-			<usync-file-upload @uploaded=${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onUploaded)}></usync-file-upload>
-			<div slot="actions">
-				<uui-button
-					id="cancel"
-					.label=${this.localize.term('general_close')}
-					@click="${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onClose)}"></uui-button>
+        return html ` ${this.localize.termOrDefault('uSync_uploadIntro', 'Select a zip file containing uSync files that you want to upload')}
+			<usync-file-upload @uploaded=${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onUploaded)}></usync-file-upload>
+			<div slot="actions">
+				<uui-button
+					id="cancel"
+					.label=${this.localize.term('general_close')}
+					@click="${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onClose)}"></uui-button>
 			</div>`;
     }
     renderResult() {
         if (this.result == undefined)
             return;
-        return html `${when(this.result.success, () => html `${this.localize.termOrDefault('uSync_uploadSuccess', 'The files have been uploaded and extracted to the uSync folder')}`, () => html `${this.localize.termOrDefault('uSync_uploadError', 'There was an error uploading the files')} ${this.result?.errors}`)}
-			<div slot="actions">
-				<uui-button id="continue" label="Import" @click="${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onImport)}"></uui-button>
+        return html `${when(this.result.success, () => html `${this.localize.termOrDefault('uSync_uploadSuccess', 'The files have been uploaded and extracted to the uSync folder')}`, () => html `${this.localize.termOrDefault('uSync_uploadError', 'There was an error uploading the files')} ${this.result?.errors}`)}
+			<div slot="actions">
+				<uui-button id="continue" label="Import" @click="${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onImport)}"></uui-button>
 			</div>`;
     }
 };
@@ -56,14 +56,14 @@ _uSyncImportModalDialog_onImport = function _uSyncImportModalDialog_onImport() {
 _uSyncImportModalDialog_onUploaded = function _uSyncImportModalDialog_onUploaded(e) {
     this.result = e.result;
 };
-uSyncImportModalDialog.styles = css `
-		umb-body-layout {
-			max-width: 450px;
-		}
-
-		usync-file-upload {
-			padding: 10px 0;
-		}
+uSyncImportModalDialog.styles = css `
+		umb-body-layout {
+			max-width: 450px;
+		}
+
+		usync-file-upload {
+			padding: 10px 0;
+		}
 	`;
 __decorate([
     state()

package/dist/workspace/views/addons/addons.element.js

@@ -9,106 +9,106 @@ import { LitElement, css, customElement, html, } from '@umbraco-cms/backoffice/e
 const logo = '/App_Plugins/uSync/img/usync-complete.png';
 let uSyncAddOnsElement = class uSyncAddOnsElement extends UmbElementMixin(LitElement) {
     render() {
-        return html `
-			<umb-body-layout>
-				<div class="addon-view">
-					<div>
-						<div class="header">
-							<img src=${logo} />
-							<h1>uSync Complete</h1>
-							<p>
-								uSync Complete gives you total control over your Umbraco settings and
-								content.
-							</p>
-						</div>
-
-						<div class="logos">
-							<div class="logo">
-								<uui-icon name="icon-shift"></uui-icon>
-								<h4>publish</h4>
-							</div>
-							<div class="logo">
-								<uui-icon name="icon-compress"></uui-icon>
-								<h4>export</h4>
-							</div>
-							<div class="logo">
-								<uui-icon name="icon-connection"></uui-icon>
-								<h4>snapshot</h4>
-							</div>
-							<div class="logo">
-								<uui-icon name="icon-undo"></uui-icon>
-								<h4>restore</h4>
-							</div>
-							<div class="logo">
-								<uui-icon name="icon-operator"></uui-icon>
-								<h4>people</h4>
-							</div>
-						</div>
-
-						<div class="cta">
-							<uui-button
-								href="https://jumoo.co.uk/uSync/complete/"
-								target="_blank"
-								color="positive"
-								look="primary"
-								label="Find out more"></uui-button>
-						</div>
-					</div>
-				</div>
-			</umb-body-layout>
+        return html `
+			<umb-body-layout>
+				<div class="addon-view">
+					<div>
+						<div class="header">
+							<img src=${logo} />
+							<h1>uSync Complete</h1>
+							<p>
+								uSync Complete gives you total control over your Umbraco settings and
+								content.
+							</p>
+						</div>
+
+						<div class="logos">
+							<div class="logo">
+								<uui-icon name="icon-shift"></uui-icon>
+								<h4>publish</h4>
+							</div>
+							<div class="logo">
+								<uui-icon name="icon-compress"></uui-icon>
+								<h4>export</h4>
+							</div>
+							<div class="logo">
+								<uui-icon name="icon-connection"></uui-icon>
+								<h4>snapshot</h4>
+							</div>
+							<div class="logo">
+								<uui-icon name="icon-undo"></uui-icon>
+								<h4>restore</h4>
+							</div>
+							<div class="logo">
+								<uui-icon name="icon-operator"></uui-icon>
+								<h4>people</h4>
+							</div>
+						</div>
+
+						<div class="cta">
+							<uui-button
+								href="https://jumoo.co.uk/uSync/complete/"
+								target="_blank"
+								color="positive"
+								look="primary"
+								label="Find out more"></uui-button>
+						</div>
+					</div>
+				</div>
+			</umb-body-layout>
 		`;
     }
 };
-uSyncAddOnsElement.styles = css `
-		umb-body-layout {
-			// background: linear-gradient(#e3e3f1,#f6f4f4);
-			background: linear-gradient(var(--uui-color-background), var(--uui-color-border));
-		}
-
-		.addon-view {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 100%;
-		}
-
-		.addon-view > div {
-			margin-top: -15vh;
-		}
-
-		.header,
-		.cta {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-		}
-
-		.header {
-			font-size: larger;
-			margin-bottom: var(--uui-size-space-6);
-		}
-
-		.logos {
-			display: flex;
-			justify-content: space-between;
-			font-size: var(--uui-type-h3-size);
-		}
-
-		.logo {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			margin: var(--uui-size-space-2) var(--uui-size-space-6);
-			color: var(--uui-color-text-alt);
-		}
-
-		.cta {
-			margin: var(--uui-size-space-6) 0;
-		}
-
-		uui-button {
-			font-size: var(--uui-type-h4-size);
-		}
+uSyncAddOnsElement.styles = css `
+		umb-body-layout {
+			// background: linear-gradient(#e3e3f1,#f6f4f4);
+			background: linear-gradient(var(--uui-color-background), var(--uui-color-border));
+		}
+
+		.addon-view {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+		}
+
+		.addon-view > div {
+			margin-top: -15vh;
+		}
+
+		.header,
+		.cta {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.header {
+			font-size: larger;
+			margin-bottom: var(--uui-size-space-6);
+		}
+
+		.logos {
+			display: flex;
+			justify-content: space-between;
+			font-size: var(--uui-type-h3-size);
+		}
+
+		.logo {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin: var(--uui-size-space-2) var(--uui-size-space-6);
+			color: var(--uui-color-text-alt);
+		}
+
+		.cta {
+			margin: var(--uui-size-space-6) 0;
+		}
+
+		uui-button {
+			font-size: var(--uui-type-h4-size);
+		}
 	`;
 uSyncAddOnsElement = __decorate([
     customElement('usync-addons-view')