@jumoo/usync-expansions 0.0.0-stage → 17.6.0

package/dist/background/components/process-list.element.js

@@ -0,0 +1,69 @@
+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 __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 _uSyncProcessListElement_cancelController;
+import { JumooProcessingPipelineList, PipelineStatus } from '@jumoo/processing';
+import { customElement, html, state } from '@umbraco-cms/backoffice/external/lit';
+import { uSyncBackgroundCancelController } from '../background-cancel.controller.js';
+import { USYNC_BACKGROUND_CHANGED_EVENT } from './constants.js';
+let uSyncProcessListElement = class uSyncProcessListElement extends JumooProcessingPipelineList {
+    constructor() {
+        super();
+        _uSyncProcessListElement_cancelController.set(this, new uSyncBackgroundCancelController(this));
+        this.tableColumns = [
+            { name: 'Alias', alias: 'alias' },
+            // { name: 'Strategy', alias: 'strategy' },
+            { name: 'State', alias: 'state' },
+            { name: 'Action', alias: 'action' },
+            { name: 'Background', alias: 'background' },
+            { name: 'Scheduled', alias: 'scheduled' },
+            { name: 'Actions', alias: 'actions' },
+        ];
+        // Background and Scheduled are where headless (Publisher/Start, Exporter/Start) runs sit.
+        this.statuses = [
+            PipelineStatus.WAITING,
+            PipelineStatus.BACKGROUND,
+            PipelineStatus.SCHEDULED,
+            PipelineStatus.RUNNING,
+            PipelineStatus.COMPLETED,
+            PipelineStatus.FAILED,
+            PipelineStatus.CANCELLED,
+        ];
+    }
+    async onCancelPipeline(e) {
+        if (await __classPrivateFieldGet(this, _uSyncProcessListElement_cancelController, "f").cancel(e.detail.piplineId, e.detail.alias)) {
+            this.dispatchEvent(new CustomEvent(USYNC_BACKGROUND_CHANGED_EVENT, {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    renderListPipelines() {
+        return !this.pipelines || this.pipelines.length === 0
+            ? html `<div class="emtpy">Nothing with status ${this.status}</div>`
+            : html `<usync-pipelines-table
+					.pipelines=${this.pipelines}
+					.hideDelete=${this.hideDelete}
+					.tableColumns=${this.tableColumns}
+					@view-pipeline=${this.onViewPipeline}
+					@cancel-pipeline=${this.onCancelPipeline}
+					@delete-pipeline=${this.onDeletePipeline}></usync-pipelines-table>`;
+    }
+};
+_uSyncProcessListElement_cancelController = new WeakMap();
+__decorate([
+    state()
+], uSyncProcessListElement.prototype, "tableColumns", void 0);
+uSyncProcessListElement = __decorate([
+    customElement('usync-process-list')
+], uSyncProcessListElement);
+export { uSyncProcessListElement };
+export default uSyncProcessListElement;

package/dist/background/components/queue-table.element.d.ts

@@ -0,0 +1,15 @@
+import { JumooQueueTableElement, QueuedItem } from '@jumoo/processing';
+/**
+ * @description the processing queue table, with process and cancel buttons. A queued item's
+ * key is the id of the pipeline it runs.
+ */
+export declare class uSyncQueueTableElement extends JumooQueueTableElement {
+    #private;
+    renderActions(item: QueuedItem): import("lit-html").TemplateResult<1>;
+}
+export default uSyncQueueTableElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-queue-table': uSyncQueueTableElement;
+    }
+}

package/dist/background/components/queue-table.element.js

@@ -0,0 +1,50 @@
+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 __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 _uSyncQueueTableElement_instances, _uSyncQueueTableElement_dispatch;
+import { JumooQueueTableElement } from '@jumoo/processing';
+import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+/**
+ * @description the processing queue table, with process and cancel buttons. A queued item's
+ * key is the id of the pipeline it runs.
+ */
+let uSyncQueueTableElement = class uSyncQueueTableElement extends JumooQueueTableElement {
+    constructor() {
+        super(...arguments);
+        _uSyncQueueTableElement_instances.add(this);
+    }
+    renderActions(item) {
+        return html `<uui-button-group>
+			<uui-button
+				label=${this.localize.term('uSyncBackground_process')}
+				color="positive"
+				look="outline"
+				@click=${() => __classPrivateFieldGet(this, _uSyncQueueTableElement_instances, "m", _uSyncQueueTableElement_dispatch).call(this, 'process-queue-item', item)}></uui-button>
+			<uui-button
+				label=${this.localize.term('uSyncBackground_cancel')}
+				color="warning"
+				look="outline"
+				@click=${() => __classPrivateFieldGet(this, _uSyncQueueTableElement_instances, "m", _uSyncQueueTableElement_dispatch).call(this, 'cancel-queue-item', item)}></uui-button>
+		</uui-button-group>`;
+    }
+};
+_uSyncQueueTableElement_instances = new WeakSet();
+_uSyncQueueTableElement_dispatch = function _uSyncQueueTableElement_dispatch(name, item) {
+    this.dispatchEvent(new CustomEvent(name, {
+        composed: true,
+        detail: { key: item.key, name: item.note || item.processor },
+    }));
+};
+uSyncQueueTableElement = __decorate([
+    customElement('usync-queue-table')
+], uSyncQueueTableElement);
+export { uSyncQueueTableElement };
+export default uSyncQueueTableElement;

package/dist/background/index.d.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/background/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/background/manifest.d.ts

@@ -0,0 +1 @@
+export declare const manifests: (import("@umbraco-cms/backoffice/workspace").ManifestWorkspace<import("@umbraco-cms/backoffice/workspace").MetaWorkspace, import("@umbraco-cms/backoffice/controller-api").UmbControllerHostElement, import("@umbraco-cms/backoffice/workspace").UmbWorkspaceContext> | import("@jumoo/usync").ManifestuSyncMenuItem)[];

package/dist/background/manifest.js

@@ -0,0 +1,24 @@
+const workspaceAlias = 'usync-background-workspace';
+const backgroundEntity = 'usync-background';
+const menuItem = {
+    type: 'usync-menuItem',
+    alias: 'usync.background.menu.item',
+    name: 'background',
+    weight: 8,
+    meta: {
+        label: 'Background',
+        icon: 'icon-circuits',
+        entityType: backgroundEntity,
+        menus: ['usync.menu'],
+    },
+};
+const workspace = {
+    type: 'workspace',
+    alias: workspaceAlias,
+    name: 'uSync Background',
+    js: () => import('./workspace/background-workspace-element.js'),
+    meta: {
+        entityType: backgroundEntity,
+    },
+};
+export const manifests = [menuItem, workspace];

package/dist/background/workspace/background-workspace-element.d.ts

@@ -0,0 +1,10 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+export declare class uSyncBackgroundWorkspaceElement extends UmbLitElement {
+    #private;
+    private _processList?;
+    private _pendingList?;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncBackgroundWorkspaceElement;

package/dist/background/workspace/background-workspace-element.js

@@ -0,0 +1,71 @@
+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 _uSyncBackgroundWorkspaceElement_pipelinesContext;
+import { PipelinesContext, PipelineStatus } from '@jumoo/processing';
+import { css, customElement, html, query } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+let uSyncBackgroundWorkspaceElement = class uSyncBackgroundWorkspaceElement extends UmbLitElement {
+    constructor() {
+        super();
+        _uSyncBackgroundWorkspaceElement_pipelinesContext.set(this, void 0);
+        __classPrivateFieldSet(this, _uSyncBackgroundWorkspaceElement_pipelinesContext, new PipelinesContext(this), "f");
+        console.debug('uSyncBackgroundWorkspaceElement', __classPrivateFieldGet(this, _uSyncBackgroundWorkspaceElement_pipelinesContext, "f"));
+        // a cancel (or process) in one list changes what's in both. The literal is
+        // USYNC_BACKGROUND_CHANGED_EVENT: importing the constant would pull the main bundle into
+        // this lazy chunk as a second copy (and define every element twice).
+        this.addEventListener('usync-background-changed', () => {
+            this._processList?.getPipelines();
+            this._pendingList?.onRefresh();
+        });
+    }
+    render() {
+        return html `<umb-body-layout
+			><div class="layout">
+				<uui-box .headline=${this.localize.term('uSyncBackground_title')}>
+					${this.localize.term('uSyncBackground_intro')}
+				</uui-box>
+
+				<usync-process-list
+					.defaultStatus=${PipelineStatus.WAITING}
+					.headline=${this.localize.term('uSyncBackground_processes')}></usync-process-list>
+
+				<usync-pending-list
+					.headline=${this.localize.term('uSyncBackground_queue')}></usync-pending-list>
+			</div>
+		</umb-body-layout>`;
+    }
+};
+_uSyncBackgroundWorkspaceElement_pipelinesContext = new WeakMap();
+uSyncBackgroundWorkspaceElement.styles = css `
+		.layout {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+		}
+	`;
+__decorate([
+    query('usync-process-list')
+], uSyncBackgroundWorkspaceElement.prototype, "_processList", void 0);
+__decorate([
+    query('usync-pending-list')
+], uSyncBackgroundWorkspaceElement.prototype, "_pendingList", void 0);
+uSyncBackgroundWorkspaceElement = __decorate([
+    customElement('usync-background-workspace-element')
+], uSyncBackgroundWorkspaceElement);
+export { uSyncBackgroundWorkspaceElement };
+export default uSyncBackgroundWorkspaceElement;

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './report-summary-view';
+export * from './usync-property-layout';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export * from './report-summary-view';
+export * from './usync-property-layout';

package/dist/components/report-summary-view.d.ts

@@ -0,0 +1,23 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { USyncActionView } from '@jumoo/usync-expansions';
+export declare class uSyncResportSummaryView extends UmbLitElement {
+    #private;
+    showAll: boolean;
+    headline: string;
+    results?: USyncActionView[];
+    /**
+     * @description is this being shown as part of a report (or false as results)
+     */
+    isReport: boolean;
+    private countChanges;
+    render(): import("lit-html").TemplateResult<1>;
+    renderToggle(): import("lit-html").TemplateResult<1>;
+    renderChangeSummary(changes: number): import("lit-html").TemplateResult<1>;
+    renderReportSummary(changes: number): import("lit-html").TemplateResult<1>;
+    renderResultSummary(changes: number): import("lit-html").TemplateResult<1>;
+    renderTable(): import("lit-html").TemplateResult<1>;
+    renderTableHeader(): import("lit-html").TemplateResult<1>;
+    renderRows(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncResportSummaryView;

package/dist/components/report-summary-view.js

@@ -0,0 +1,199 @@
+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 __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 _uSyncResportSummaryView_instances, _uSyncResportSummaryView_showDetail;
+import { classMap, css, customElement, html, nothing, property, state, when, } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { ChangeType } from '../api/index.js';
+let uSyncResportSummaryView = class uSyncResportSummaryView extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncResportSummaryView_instances.add(this);
+        this.showAll = false;
+        this.headline = 'Change report';
+        /**
+         * @description is this being shown as part of a report (or false as results)
+         */
+        this.isReport = true;
+    }
+    countChanges() {
+        let changes = 0;
+        this.results?.forEach((result) => {
+            if (result.change !== ChangeType.NO_CHANGE) {
+                changes++;
+            }
+        });
+        return changes;
+    }
+    render() {
+        const changes = this.countChanges();
+        return html ` ${this.renderChangeSummary(changes)}
+			<uui-box .headline=${this.headline}>
+				<div slot="header-actions">${this.renderToggle()}</div>
+				${when(this.showAll || changes > 0, () => this.renderTable())}
+			</uui-box>`;
+    }
+    renderToggle() {
+        return html `
+			<uui-toggle
+				.label=${this.localize.term('uSync_showAll')}
+				labelPosition="left"
+				?checked=${this.showAll}
+				@change=${() => {
+            this.showAll = !this.showAll;
+        }}></uui-toggle>
+		`;
+    }
+    renderChangeSummary(changes) {
+        return this.isReport
+            ? this.renderReportSummary(changes)
+            : this.renderResultSummary(changes);
+    }
+    renderReportSummary(changes) {
+        return changes > 0
+            ? html `<div class="change-msg">
+					<h4>
+						${this.localize.term('uSyncReport_pendingChanges', [
+                changes,
+                this.results?.length ?? 0,
+            ])}
+					</h4>
+				</div>`
+            : html `<div class="change-msg positive">
+					<h4>${this.localize.term('uSyncReport_noChanges')}</h4>
+					<p>${this.localize.term('uSyncReport_noChangesDescription')}</p>
+				</div>`;
+    }
+    renderResultSummary(changes) {
+        return changes > 0
+            ? html `<div class="change-msg">
+					<h4>
+						${this.localize.term('uSyncReport_resultChanges', [
+                changes,
+                this.results?.length ?? 0,
+            ])}
+					</h4>
+				</div>`
+            : html `<div class="change-msg positive">
+					<h4>${this.localize.term('uSyncReport_noChanges')}</h4>
+					<p>${this.localize.term('uSyncReport_resultNoChange')}</p>
+				</div>`;
+    }
+    renderTable() {
+        return html `
+			<uui-table> ${this.renderTableHeader()} ${this.renderRows()} </uui-table>
+		`;
+    }
+    renderTableHeader() {
+        return html `
+			<uui-table-head>
+				<uui-table-head-cell class="icon-cell" .noPadding=${true}>
+					<!-- <umb-icon name="icon-checkbox-dotted"></umb-icon> -->
+				</uui-table-head-cell>
+				<uui-table-head-cell style="--uui-table-cell-padding: var(--uui-size-space-2);">
+					<umb-localize key="uSync_changeName">Name</umb-localize>
+				</uui-table-head-cell>
+			</uui-table-head>
+		`;
+    }
+    renderRows() {
+        const rowsHtml = this.results?.map((result) => {
+            if (!this.showAll && result.change == ChangeType.NO_CHANGE)
+                return nothing;
+            const icon = result.change == ChangeType.NO_CHANGE
+                ? 'icon-trafic'
+                : result.success
+                    ? 'icon-check color-green'
+                    : 'icon-wrong color-red';
+            return html `
+				<uui-table-row
+					class=${classMap({ changerow: result.change != ChangeType.NO_CHANGE })}>
+					<uui-table-cell class="icon-cell" .noPadding=${true}>
+						<umb-icon .name=${icon}></umb-icon>
+					</uui-table-cell>
+					<uui-table-cell
+						@click=${() => __classPrivateFieldGet(this, _uSyncResportSummaryView_instances, "m", _uSyncResportSummaryView_showDetail).call(this, result)}
+						.clipText=${true}
+						style="--uui-table-cell-padding: var(--uui-size-space-2);">
+						<div>${result.name}</div>
+						<div class="item-detail">
+							<div>${result.itemType}</div>
+							<div>${result.change}</div>
+						</div>
+					</uui-table-cell>
+				</uui-table-row>
+			`;
+        });
+        return html `${rowsHtml}`;
+    }
+};
+_uSyncResportSummaryView_instances = new WeakSet();
+_uSyncResportSummaryView_showDetail = async function _uSyncResportSummaryView_showDetail(action) {
+    if (action.change == ChangeType.NO_CHANGE)
+        return;
+    // TODO . Open the shared details modal
+};
+uSyncResportSummaryView.styles = css `
+		.changerow {
+			cursor: pointer;
+		}
+
+		.icon-cell {
+			width: var(--uui-size-8);
+		}
+
+		.item-detail {
+			display: flex;
+			justify-content: space-between;
+			font-size: smaller;
+			color: var(--uui-color-disabled-contrast);
+		}
+
+		.change-msg {
+			padding: var(--uui-size-3);
+			margin-bottom: var(--uui-size-3);
+		}
+
+		.change-msg.positive {
+			background-color: var(--uui-color-positive);
+			color: #fff;
+			box-shadow: var(--uui-shadow-depth-1);
+		}
+
+		.change-msg > * {
+			margin: var(--uui-size-4) 0;
+		}
+
+		uui-box {
+			margin-bottom: var(--uui-size-3);
+		}
+
+		uui-table-row:hover {
+			background-color: var(--uui-color-disabled);
+		}
+	`;
+__decorate([
+    state()
+], uSyncResportSummaryView.prototype, "showAll", void 0);
+__decorate([
+    property({ type: String })
+], uSyncResportSummaryView.prototype, "headline", void 0);
+__decorate([
+    property({ type: Array })
+], uSyncResportSummaryView.prototype, "results", void 0);
+__decorate([
+    property({ type: Boolean })
+], uSyncResportSummaryView.prototype, "isReport", void 0);
+uSyncResportSummaryView = __decorate([
+    customElement('usync-report-summary-view')
+], uSyncResportSummaryView);
+export { uSyncResportSummaryView };
+export default uSyncResportSummaryView;

package/dist/components/usync-property-layout.d.ts

@@ -0,0 +1,17 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+export declare class uSyncPropertyLayout extends UmbLitElement {
+    #private;
+    alias: string;
+    label: string;
+    description: string;
+    invalid?: boolean;
+    mandatory?: boolean;
+    alignment: 'left' | 'right';
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-property-layout': uSyncPropertyLayout;
+    }
+}

package/dist/components/usync-property-layout.js

@@ -0,0 +1,159 @@
+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 __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 _uSyncPropertyLayout_instances, _uSyncPropertyLayout_renderDescription;
+import { css, customElement, html, property, when, } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+let uSyncPropertyLayout = class uSyncPropertyLayout extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncPropertyLayout_instances.add(this);
+        this.alias = '';
+        this.label = '';
+        this.description = '';
+        this.alignment = 'right';
+    }
+    render() {
+        // TODO: Only show alias on label if user has access to DocumentType within settings:
+        return html `
+			<div id="headerColumn">
+				<uui-label id="label" title=${this.alias} ?required=${this.mandatory}>
+					${this.localize.string(this.label)}
+					${when(this.invalid, () => html `<div id="invalid-badge">
+								<uui-badge color="invalid" attention>!</uui-badge>
+							</div>`)}
+				</uui-label>
+				<slot name="action-menu"></slot>
+				${__classPrivateFieldGet(this, _uSyncPropertyLayout_instances, "m", _uSyncPropertyLayout_renderDescription).call(this)}
+				<slot name="description"></slot>
+			</div>
+			<div id="editorColumn">
+				<umb-form-validation-message>
+					<slot name="editor"></slot>
+				</umb-form-validation-message>
+			</div>
+		`;
+    }
+};
+_uSyncPropertyLayout_instances = new WeakSet();
+_uSyncPropertyLayout_renderDescription = function _uSyncPropertyLayout_renderDescription() {
+    if (!this.description)
+        return;
+    const ufmValue = {
+        alias: this.alias,
+        label: this.label,
+        description: this.description,
+    };
+    return html `<umb-ufm-render
+			id="description"
+			.markdown=${this.description}
+			.value=${ufmValue}></umb-ufm-render>`;
+};
+uSyncPropertyLayout.styles = [
+    UmbTextStyles,
+    css `
+			:host {
+				display: grid;
+				grid-template-columns: 100px minmax(0, 1fr);
+				column-gap: var(--uui-size-layout-2);
+				padding: var(--uui-size-4) 0;
+				container-type: inline-size;
+			}
+
+			:host(:not([alignment='left'])) {
+				grid-template-columns: 300px minmax(0, 1fr);
+			}
+
+			:host > div {
+				grid-column: span 2;
+			}
+
+			:host(:not([orientation='vertical'])) > div {
+				grid-column: span 1;
+			}
+
+			#headerColumn {
+				position: relative;
+				height: min-content;
+				top: var(--umb-property-layout-header-top);
+			}
+
+			:host(:not([orientation='vertical'])) #headerColumn {
+				position: sticky;
+				top: var(--umb-property-layout-header-top, calc(var(--uui-size-space-2) * -1));
+			}
+
+			:host {
+				/* TODO: Temp solution to not get a yellow asterisk when invalid. */
+				--umb-temp-uui-color-invalid: var(--uui-color-invalid);
+			}
+
+			#label {
+				position: relative;
+				word-break: break-word;
+				/* TODO: Temp solution to not get a yellow asterisk when invalid. */
+				--uui-color-invalid: var(--uui-color-danger);
+			}
+			#invalid-badge {
+				display: inline-block;
+				position: relative;
+				width: 18px;
+				height: 1em;
+				margin-right: 6px;
+			}
+			uui-badge {
+				//height: var(--uui-color-invalid);
+				background-color: var(--umb-temp-uui-color-invalid);
+				color: var(--uui-color-invalid-contrast);
+			}
+
+			#description {
+				color: var(--uui-color-text-alt);
+			}
+
+			#editorColumn {
+				display: flex;
+				align-items: center;
+				margin-top: var(--uui-size-space-3);
+			}
+
+			:host(:not([alignment='left'])) #editorColumn {
+				justify-content: flex-end;
+			}
+
+			:host(:not([orientation='vertical'])) #editorColumn {
+				margin-top: 0;
+			}
+		`,
+];
+__decorate([
+    property({ type: String })
+], uSyncPropertyLayout.prototype, "alias", void 0);
+__decorate([
+    property({ type: String })
+], uSyncPropertyLayout.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], uSyncPropertyLayout.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], uSyncPropertyLayout.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean })
+], uSyncPropertyLayout.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], uSyncPropertyLayout.prototype, "alignment", void 0);
+uSyncPropertyLayout = __decorate([
+    customElement('usync-property-layout')
+], uSyncPropertyLayout);
+export { uSyncPropertyLayout };

package/dist/exports.d.ts

@@ -0,0 +1,6 @@
+export * from './api/index.js';
+export * from './items/index.js';
+export * from './components/index.js';
+export * from './licence/index.js';
+export * from './restore/index.js';
+export * from './background/index.js';