@jumoo/usync 0.0.0-stage → 17.5.0

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

@@ -0,0 +1,22 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { type USyncActionView, type USyncChange } from '@jumoo/uSync';
+import './usync-change-detail.js';
+/**
+ * shows the change details for an item.
+ */
+export declare class uSyncChangeView extends UmbLitElement {
+    #private;
+    item?: USyncActionView;
+    render(): import("lit-html").TemplateResult<1>;
+    renderDetails(details: Array<USyncChange>): import("lit-html").TemplateResult<1>;
+    renderNoChanges(): import("lit-html").TemplateResult<1>;
+    render_create(): import("lit-html").TemplateResult<1>;
+    renderMessage(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncChangeView;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-change-view': uSyncChangeView;
+    }
+}

package/dist/components/usync-change-view.js

@@ -0,0 +1,125 @@
+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 _uSyncChangeView_instances, _uSyncChangeView_renderable;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { classMap, css, customElement, html, property, repeat, } from '@umbraco-cms/backoffice/external/lit';
+import { ChangeDetailType, ChangeType, } from '@jumoo/uSync';
+import './usync-change-detail.js';
+/**
+ * shows the change details for an item.
+ */
+let uSyncChangeView = class uSyncChangeView extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncChangeView_instances.add(this);
+    }
+    render() {
+        if (this.item?.change === ChangeType.CREATE) {
+            return this.render_create();
+        }
+        // note: this has to test the *renderable* details, not the raw count -
+        // an unchanged item still arrives with a single `NoChange` detail, and
+        // branching on the raw length would render an empty list instead of
+        // the "no changes" message.
+        const details = __classPrivateFieldGet(this, _uSyncChangeView_instances, "m", _uSyncChangeView_renderable).call(this);
+        if (details.length > 0) {
+            return this.renderDetails(details);
+        }
+        else {
+            return this.renderNoChanges();
+        }
+    }
+    renderDetails(details) {
+        // with a single change there's nothing to scan past, so open it
+        // straight away; with more than one, start collapsed and let the user
+        // open the ones they care about.
+        const startOpen = details.length <= 1;
+        return html `
+			<div class="detail-list">
+				${repeat(details, (detail, index) => `${index}:${detail.path}:${detail.name}`, (detail) => html `<usync-change-detail
+							.detail=${detail}
+							?open=${startOpen}></usync-change-detail>`)}
+			</div>
+		`;
+    }
+    renderNoChanges() {
+        return html `
+			<div class="change-box">
+				<h3>
+					<umb-localize key="uSync_noChanges${this.item?.change}"
+						>No changes</umb-localize
+					>
+				</h3>
+				${this.renderMessage()}
+			</div>
+		`;
+    }
+    render_create() {
+        return html `
+			<div class="change-box">
+				<h3>
+					<umb-localize key="uSync_changeCreate">This item is being created</umb-localize>
+				</h3>
+			</div>
+		`;
+    }
+    renderMessage() {
+        const message = (this.item?.message?.length ?? 0) > 0
+            ? this.item?.message
+            : this.item?.change == ChangeType.IMPORT
+                ? 'No changes were made but the item was imported'
+                : 'There are pending changes for this item';
+        const classes = { error: this.item?.success == false };
+        return html `<div class="${classMap(classes)}">${message}</div> `;
+    }
+};
+_uSyncChangeView_instances = new WeakSet();
+_uSyncChangeView_renderable = function _uSyncChangeView_renderable() {
+    return (this.item?.details ?? []).filter((detail) => detail.change !== ChangeDetailType.NO_CHANGE);
+};
+uSyncChangeView.styles = css `
+		:host {
+			display: block;
+			margin: 0;
+		}
+
+		.change-box {
+			display: block;
+			padding: var(
+				--uui-box-header-padding,
+				var(--uui-size-space-4, 12px) var(--uui-size-space-5, 18px)
+			);
+		}
+
+		.change-box h3 {
+			margin: 0;
+		}
+
+		.error {
+			color: var(--uui-color-danger);
+			margin-top: var(--uui-size-space-2);
+		}
+
+		.detail-list {
+			display: flex;
+			flex-direction: column;
+			border-top: 1px solid var(--uui-color-border);
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncChangeView.prototype, "item", void 0);
+uSyncChangeView = __decorate([
+    customElement('usync-change-view')
+], uSyncChangeView);
+export { uSyncChangeView };
+export default uSyncChangeView;

package/dist/components/usync-progress-box.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { SyncUpdateMessage, SyncHandlerSummary, SyncProgressSummary } from '@jumoo/uSync';
+declare const uSyncProcessBox_base: import("@umbraco-cms/backoffice/extension-api").HTMLElementConstructor<import("@umbraco-cms/backoffice/element-api").UmbElement> & typeof LitElement;
+/**
+ * Provides the progress box while things happen.
+ */
+export declare class uSyncProcessBox extends uSyncProcessBox_base {
+    #private;
+    constructor();
+    updateMsg?: SyncUpdateMessage;
+    addMsg?: SyncProgressSummary;
+    title: string;
+    actions?: Array<SyncHandlerSummary>;
+    complete: boolean;
+    showProgress: boolean;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderBadge(action: SyncHandlerSummary): import("lit-html").TemplateResult<1> | undefined;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncProcessBox;

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

@@ -0,0 +1,223 @@
+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 _uSyncProcessBox_instances, _uSyncProcessBox_hideProgress, _uSyncProcessBox_camelize;
+import { customElement, LitElement, css, html, property, nothing, state, classMap, } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import { USYNC_SIGNALR_CONTEXT_TOKEN, HandlerStatus, } from '@jumoo/uSync';
+/**
+ * Provides the progress box while things happen.
+ */
+let uSyncProcessBox = class uSyncProcessBox extends UmbElementMixin(LitElement) {
+    constructor() {
+        super();
+        _uSyncProcessBox_instances.add(this);
+        this.title = '';
+        this.complete = false;
+        this.showProgress = true;
+        this.consumeContext(USYNC_SIGNALR_CONTEXT_TOKEN, (_signalR) => {
+            if (!_signalR)
+                return;
+            this.observe(_signalR.update, (_update) => {
+                this.updateMsg = _update;
+            });
+            this.observe(_signalR.add, (_add) => {
+                this.addMsg = _add;
+            });
+        });
+    }
+    render() {
+        let actions = this.actions;
+        if (!this.actions || this.actions.length === 0) {
+            actions = this.addMsg?.handlers;
+        }
+        if (!actions)
+            return nothing;
+        let progress = 0;
+        const actionCount = actions.length;
+        const boxSize = 100 / actionCount;
+        const actionProgress = (this.updateMsg?.count ?? 0) / (this.updateMsg?.total ?? 1);
+        let actionHtml = actions?.map((action) => {
+            if (action.status == HandlerStatus.COMPLETE)
+                progress++;
+            const actionName = __classPrivateFieldGet(this, _uSyncProcessBox_instances, "m", _uSyncProcessBox_camelize).call(this, action.name ?? 'unknown');
+            return html `
+				<div
+					class="action 
+                    ${action.status == HandlerStatus.COMPLETE ? 'complete' : ''} 
+                    ${action.status == HandlerStatus.PROCESSING ? 'working' : ''}">
+					<div class="icon-holder">
+						<uui-icon .name=${action.icon ?? 'icon-box'}></uui-icon>
+						${this.renderBadge(action)}
+					</div>
+					<h4>${this.localize.termOrDefault(`treeHeaders_${actionName}`, actionName)}</h4>
+				</div>
+			`;
+        });
+        let overall = this.showProgress
+            ? progress * boxSize + actionProgress * boxSize - boxSize
+            : 0;
+        if (this.complete) {
+            __classPrivateFieldGet(this, _uSyncProcessBox_instances, "m", _uSyncProcessBox_hideProgress).call(this);
+        }
+        else {
+            this.showProgress = true;
+        }
+        const progressClass = { hidden: !this.showProgress };
+        return html `
+			<uui-box>
+				<h2>${this.localize.termOrDefault(`uSync_group${this.title}`, this.title)}</h2>
+				<div class="action-list">${actionHtml}</div>
+				<div class="update-box">${this.updateMsg?.message}</div>
+				<uui-progress-bar
+					progress=${overall}
+					class=${classMap(progressClass)}></uui-progress-bar>
+			</uui-box>
+		`;
+    }
+    renderBadge(action) {
+        if (action.status == HandlerStatus.PENDING)
+            return;
+        if (action.status == HandlerStatus.PROCESSING) {
+            return html `<uui-badge color="positive" look="default">
+				<uui-icon name="icon-circle-dotted" class="rotating"></uui-icon
+			></uui-badge>`;
+        }
+        const color = action.inError ? 'warning' : 'positive';
+        const label = action.inError
+            ? 'Some errors occured duing import'
+            : 'Changes imported successfully';
+        if (!this.complete || action.changes == 0)
+            return html `<uui-badge .color=${color} look="default" title=${label}
+				><uui-icon name="icon-check"></uui-icon
+			></uui-badge>`;
+        return html `<uui-badge .color=${color} title=${label}>${action.changes}</uui-badge>`;
+    }
+};
+_uSyncProcessBox_instances = new WeakSet();
+_uSyncProcessBox_hideProgress = function _uSyncProcessBox_hideProgress() {
+    window.setTimeout(() => {
+        this.showProgress = false;
+    }, 2000);
+};
+_uSyncProcessBox_camelize = function _uSyncProcessBox_camelize(str) {
+    return str
+        .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+        return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    })
+        .replace(/\s+/g, '');
+};
+uSyncProcessBox.styles = css `
+		:host {
+			display: block;
+		}
+
+		h2 {
+			text-align: center;
+			margin: 0;
+		}
+
+		.action-list {
+			margin-top: var(--uui-size-space-4);
+			padding: var(--uui-size-space-4) 0;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+
+		.action {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			min-width: var(--uui-size-layout-5);
+			color: var(--uui-color-text-alt);
+			opacity: 0.67;
+			margin: var(--uui-size-space-4) 0 var(--uui-size-space-6);
+		}
+
+		.action h4 {
+			margin: var(--uui-size-space-4) 0;
+		}
+
+		.icon-holder {
+			position: relative;
+			padding: 0 var(--uui-size-7);
+		}
+
+		.rotating {
+			animation: spin-animation 2s infinite;
+			animation-timing-function: linear;
+			display: inline-block;
+		}
+
+		@keyframes spin-animation {
+			0% {
+				transform: rotate(360deg);
+			}
+			100% {
+				transform: rotate(0deg);
+			}
+		}
+
+		.action uui-icon {
+			font-size: var(--uui-size-12);
+		}
+
+		.action uui-badge uui-icon {
+			font-size: var(--uui-type-h4-size);
+		}
+
+		.complete {
+			color: var(--uui-color-default-emphasis);
+		}
+
+		.working {
+			color: var(--uui-color-positive);
+			opacity: 1;
+		}
+
+		.update-box {
+			font-weight: bold;
+			text-align: center;
+		}
+
+		uui-progress-bar {
+			padding: 0;
+			margin: 0;
+		}
+
+		.hidden {
+			opacity: 0;
+		}
+	`;
+__decorate([
+    state()
+], uSyncProcessBox.prototype, "updateMsg", void 0);
+__decorate([
+    state()
+], uSyncProcessBox.prototype, "addMsg", void 0);
+__decorate([
+    property({ type: String })
+], uSyncProcessBox.prototype, "title", void 0);
+__decorate([
+    property({ type: Array })
+], uSyncProcessBox.prototype, "actions", void 0);
+__decorate([
+    property({ type: Boolean })
+], uSyncProcessBox.prototype, "complete", void 0);
+__decorate([
+    state()
+], uSyncProcessBox.prototype, "showProgress", void 0);
+uSyncProcessBox = __decorate([
+    customElement('usync-progress-box')
+], uSyncProcessBox);
+export { uSyncProcessBox };
+export default uSyncProcessBox;

package/dist/components/usync-result-row.d.ts

@@ -0,0 +1,15 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { USyncActionView } from '../api';
+export declare class uSyncResultRow extends UmbLitElement {
+    #private;
+    result?: USyncActionView;
+    render(): import("lit-html").TemplateResult<1> | null;
+    renderMessage(result: USyncActionView): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncResultRow;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-result-row': uSyncResultRow;
+    }
+}

package/dist/components/usync-result-row.js

@@ -0,0 +1,133 @@
+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 _uSyncResultRow_instances, _uSyncResultRow_showDetail, _uSyncResultRow_viewError;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { ChangeType } from '../api';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap, css, html } from '@umbraco-cms/backoffice/external/lit';
+import { uSyncShowDetailEvent } from './events';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { USYNC_ERROR_MODAL } from '../dialogs';
+let uSyncResultRow = class uSyncResultRow extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncResultRow_instances.add(this);
+    }
+    render() {
+        if (!this.result)
+            return null;
+        const result = this.result;
+        const icon = result.change == ChangeType.NO_CHANGE
+            ? 'icon-trafic'
+            : result.success
+                ? 'icon-check color-green'
+                : 'icon-wrong color-red';
+        const noChange = result.change == ChangeType.NO_CHANGE || result.change == ChangeType.EXPORT;
+        return html `<div
+			class="${classMap({ no_change: noChange })} row"
+			@click=${() => __classPrivateFieldGet(this, _uSyncResultRow_instances, "m", _uSyncResultRow_showDetail).call(this, result)}>
+			<div class="icon-cell" .noPadding=${true}>
+				<umb-icon .name=${icon}></umb-icon>
+			</div>
+			<div class="row-content" .clipText=${true}>
+				<div class="item-detail">
+					<div class="item-change">${result.change}</div>
+				</div>
+				<div class="item-name">
+					<div>${result.name}</div>
+					<div>${this.renderMessage(result)}</div>
+				</div>
+			</div>
+		</div>`;
+    }
+    renderMessage(result) {
+        return (result.change != ChangeType.FAIL &&
+            result.change != ChangeType.IMPORT_FAIL) ||
+            !result.message
+            ? html `<em>${result.message}</em>`
+            : html ` <uui-button
+					look="outline"
+					color="danger"
+					label="View error"
+					compact
+					@click=${(e) => __classPrivateFieldGet(this, _uSyncResultRow_instances, "m", _uSyncResultRow_viewError).call(this, e, result)}></uui-button>`;
+    }
+};
+_uSyncResultRow_instances = new WeakSet();
+_uSyncResultRow_showDetail = async function _uSyncResultRow_showDetail(action) {
+    if (action.change == ChangeType.NO_CHANGE || action.change == ChangeType.EXPORT)
+        return;
+    this.dispatchEvent(new uSyncShowDetailEvent(action));
+};
+_uSyncResultRow_viewError = async function _uSyncResultRow_viewError(e, result) {
+    e.stopPropagation();
+    const modalContext = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+    const modal = modalContext?.open(this, USYNC_ERROR_MODAL, {
+        data: {
+            action: result,
+        },
+    });
+    const data = await modal?.onSubmit().catch(() => {
+        return;
+    });
+    return data;
+};
+uSyncResultRow.styles = css `
+		.row {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-5);
+			padding: var(--uui-size-space-5);
+			border-bottom: 1px solid var(--uui-color-border);
+			cursor: pointer;
+		}
+
+		.row:hover {
+			background-color: var(--uui-color-surface-alt);
+		}
+
+		.no_change {
+			color: var(--uui-color-disabled-contrast);
+			cursor: default;
+		}
+
+		.row-content {
+			gap: 10px;
+			flex-grow: 1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.item-name {
+			display: flex;
+			font-weight: bold;
+			align-items: center;
+			flex-grow: 2;
+			justify-content: space-between;
+		}
+
+		.item-detail {
+			display: flex;
+			flex-direction: column;
+			font-size: smaller;
+			min-width: 60px;
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncResultRow.prototype, "result", void 0);
+uSyncResultRow = __decorate([
+    customElement('usync-result-row')
+], uSyncResultRow);
+export { uSyncResultRow };
+export default uSyncResultRow;

package/dist/components/usync-results-group-view.d.ts

@@ -0,0 +1,19 @@
+import { nothing } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { USyncActionView } from '../api';
+export declare class uSyncResultGroupView extends UmbLitElement {
+    expanded: boolean;
+    showAll: boolean;
+    results: Array<USyncActionView>;
+    groupName: string;
+    getChangeCount(): number;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderGroupedRows(results?: USyncActionView[]): (typeof nothing | import("lit-html").TemplateResult<1>)[] | undefined;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncResultGroupView;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-result-group': uSyncResultGroupView;
+    }
+}

package/dist/components/usync-results-group-view.js

@@ -0,0 +1,110 @@
+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;
+};
+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';
+let uSyncResultGroupView = class uSyncResultGroupView extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.expanded = false;
+        this.showAll = false;
+        this.results = [];
+        this.groupName = '';
+    }
+    getChangeCount() {
+        return this.results?.filter((r) => r.change !== ChangeType.NO_CHANGE).length;
+    }
+    render() {
+        const changeCount = this.getChangeCount() ?? 0;
+        if (changeCount === 0 && !this.showAll)
+            return nothing;
+        return html `
+			<uui-box
+				class=${classMap({
+            has_changes: changeCount > 0,
+        })}>
+				<div
+					class="summary ${when(this.expanded, () => 'expanded')}"
+					@click=${() => (this.expanded = !this.expanded)}>
+					<h4>${this.localize.termOrDefault('uSync_' + this.groupName, this.groupName)}</h4>
+					<div class="summary-right">
+						<h4 class="count">${changeCount}/${this.results?.length}</h4>
+						<uui-icon
+							name="icon-play"
+							class=${classMap({ expanded: this.expanded })}></uui-icon>
+					</div>
+				</div>
+				<uui-table>
+					${when(this.expanded == true, () => html `${this.renderGroupedRows(this.results)}`)}
+				</uui-table>
+			</uui-box>
+		`;
+    }
+    renderGroupedRows(results) {
+        const rowsHtml = results?.map((result) => {
+            if (!this.showAll && result.change == ChangeType.NO_CHANGE)
+                return nothing;
+            return html `<usync-result-row .result=${result}></usync-result-row>`;
+        });
+        return rowsHtml;
+    }
+};
+uSyncResultGroupView.styles = css `
+		uui-box {
+			cursor: pointer;
+			--uui-box-default-padding: 0;
+		}
+
+		.expanded {
+			border-bottom: 1px solid var(--uui-color-border);
+		}
+
+		.summary {
+			display: flex;
+			margin: 0;
+			padding: 0 20px;
+			justify-content: space-between;
+		}
+
+		.summary-right {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-2);
+			color: var(--uui-color-border-emphasis);
+		}
+
+		.summary-right uui-icon {
+			transform: rotate(90deg);
+			transition: transform 0.5s cubic-bezier(0.42, 0, 0.37, 1.62);
+		}
+
+		.summary-right uui-icon.expanded {
+			transform: rotate(-90deg);
+			border-bottom: none;
+		}
+
+		.count {
+			color: var(--uui-text);
+		}
+	`;
+__decorate([
+    state()
+], uSyncResultGroupView.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], uSyncResultGroupView.prototype, "showAll", void 0);
+__decorate([
+    property({ type: Array })
+], uSyncResultGroupView.prototype, "results", void 0);
+__decorate([
+    property({ type: String })
+], uSyncResultGroupView.prototype, "groupName", void 0);
+uSyncResultGroupView = __decorate([
+    customElement('usync-result-group')
+], uSyncResultGroupView);
+export { uSyncResultGroupView };
+export default uSyncResultGroupView;

package/dist/components/usync-results-view.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { USyncActionView } from '@jumoo/uSync';
+declare const uSyncResultsView_base: import("@umbraco-cms/backoffice/extension-api").HTMLElementConstructor<import("@umbraco-cms/backoffice/element-api").UmbElement> & typeof LitElement;
+export declare class uSyncResultsView extends uSyncResultsView_base {
+    #private;
+    constructor();
+    results: Array<USyncActionView> | undefined;
+    hideResultBar: boolean;
+    hideActions: boolean;
+    showAll: boolean;
+    changeCount: number;
+    groupBy<T>(arr: T[], fn: (item: T) => any): Record<string, T[]>;
+    render(): import("lit-html").TemplateResult<1>;
+    renderResultBar(count: number, changes: number): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncResultsView;