@jumoo/usync 0.0.0-stage → 18.2.0

package/dist/components/usync-action-box.js

@@ -0,0 +1,129 @@
+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 _uSyncActionBox_instances, _uSyncActionBox_onAction;
+import { customElement, html, css, property, ifDefined, } from '@umbraco-cms/backoffice/external/lit';
+import { uSyncTimeFormatOptions } from '@jumoo/uSync';
+import { uSyncActionPerformEvent, } from '../workspace/components/events';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+/**
+ * displays the action buttons for a given group
+ */
+let uSyncActionBox = class uSyncActionBox extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncActionBox_instances.add(this);
+        this.disabled = false;
+    }
+    render() {
+        const dropdownButtons = this.group.buttons.map((b) => {
+            return html `
+				<usync-action-button
+					.button=${b}
+					.disabled=${this.disabled}
+					state=${ifDefined(this.state)}
+					@usync-action-click=${(e) => __classPrivateFieldGet(this, _uSyncActionBox_instances, "m", _uSyncActionBox_onAction).call(this, e, this.group)}></usync-action-button>
+			`;
+        });
+        return html `
+			<uui-box class="action-box ${this.disabled ? 'disabled' : ''}">
+				<div class="box-content">
+					<div class="box-heading">
+						<h2 class="box-heading" title=${this.getLastSyncDate()}>
+							${this.localize.termOrDefault(`uSync_group${this.group?.groupName}`, this.group?.groupName ?? '')}
+						</h2>
+						<umb-icon name=${this.group?.icon}></umb-icon>
+					</div>
+					<div class="box-buttons">${dropdownButtons}</div>
+				</div>
+			</uui-box>
+		`;
+    }
+    getLastSyncDate() {
+        if (!this.group?.lastSync)
+            return '';
+        return `Last imported: ${this.localize.date(this.group.lastSync, uSyncTimeFormatOptions)}`;
+    }
+};
+_uSyncActionBox_instances = new WeakSet();
+_uSyncActionBox_onAction = function _uSyncActionBox_onAction(e, group) {
+    if (!e?.button)
+        return;
+    this.dispatchEvent(new uSyncActionPerformEvent(group, e.button.key, e.button.force, e.button.clean, e.button.file));
+};
+uSyncActionBox.styles = css `
+		:host {
+			flex-grow: 1;
+		}
+
+		.action-box {
+			transition: opacity 0.2s ease-in-out;
+			--uui-box-default-padding: var(--uui-size-space-4) 0;
+		}
+
+		.box-content {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.box-heading {
+			font-size: var(--uui-type-h3-size);
+			cursor: help;
+			margin: var(--uui-size-space-3);
+		}
+
+		umb-icon {
+			margin: var(--uui-size-4) 0 var(--uui-size-4);
+			font-size: var(--uui-type-h2-size);
+			color: var(--uui-color-text-alt);
+		}
+
+		uui-button {
+			margin: 0 var(--uui-size-space-2);
+			font-size: var(--uui-size-6);
+		}
+
+		.box-buttons {
+			margin: var(--uui-size-space-2) 0;
+		}
+
+		.disabled {
+			opacity: 0.4;
+		}
+
+		.last-sync {
+			color: var(--uui-color-text-alt);
+			font-style: italic;
+			font-size: var(--uui-size-5);
+		}
+
+		.box-heading {
+			display: flex;
+			flex-direction: row-reverse;
+			gap: var(--uui-size-2);
+			align-items: center;
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncActionBox.prototype, "group", void 0);
+__decorate([
+    property({ type: String })
+], uSyncActionBox.prototype, "state", void 0);
+__decorate([
+    property({ type: Boolean })
+], uSyncActionBox.prototype, "disabled", void 0);
+uSyncActionBox = __decorate([
+    customElement('usync-action-box')
+], uSyncActionBox);
+export { uSyncActionBox };
+export default uSyncActionBox;

package/dist/components/usync-change-detail.d.ts

@@ -0,0 +1,31 @@
+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 USyncChange } from '../api';
+/**
+ * Renders a single `USyncChange` detail as an expandable row, using the
+ * strategy chosen by `classifyChange` to pick a compact, readable diff
+ * rather than a wall of pretty-printed JSON.
+ */
+export declare class uSyncChangeDetail extends UmbLitElement {
+    #private;
+    detail?: USyncChange;
+    open: boolean;
+    private _classified?;
+    private _json?;
+    private _lines?;
+    private _lineDegraded;
+    private _label?;
+    private _showRaw;
+    private _expandedRuns;
+    private _expandedLeaves;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncChangeDetail;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-change-detail': uSyncChangeDetail;
+    }
+}