@jumoo/usync 18.2.0 → 19.0.0-beta01

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

@@ -43,33 +43,33 @@ let uSyncChangeView = class uSyncChangeView extends UmbLitElement {
         // 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>
+        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>
+        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>
+        return html `
+			<div class="change-box">
+				<h3>
+					<umb-localize key="uSync_changeCreate">This item is being created</umb-localize>
+				</h3>
+			</div>
 		`;
     }
     renderMessage() {
@@ -86,34 +86,34 @@ _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);
-		}
+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 })

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

@@ -50,17 +50,17 @@ let uSyncProcessBox = class uSyncProcessBox extends UmbElementMixin(LitElement)
             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>
+            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
@@ -73,25 +73,25 @@ let uSyncProcessBox = class uSyncProcessBox extends UmbElementMixin(LitElement)
             this.showProgress = true;
         }
         const progressClass = { hidden: !this.showProgress };
-        return html `
-			<uui-box>
-				<div class="header">
-					<h2>${this.localize.termOrDefault(`uSync_group${this.title}`, this.title)}</h2>
-				</div>
-				<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>
+        return html `
+			<uui-box>
+				<div class="header">
+					<h2>${this.localize.termOrDefault(`uSync_group${this.title}`, this.title)}</h2>
+				</div>
+				<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
+            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';
@@ -99,8 +99,8 @@ let uSyncProcessBox = class uSyncProcessBox extends UmbElementMixin(LitElement)
             ? '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
+            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>`;
     }
@@ -118,93 +118,93 @@ _uSyncProcessBox_camelize = function _uSyncProcessBox_camelize(str) {
     })
         .replace(/\s+/g, '');
 };
-uSyncProcessBox.styles = css `
-		:host {
-			display: block;
-		}
-
-		.header {
-			display: flex;
-			justify-content: center;
-			padding: var(uui-size-space-3);
-		}
-
-		h2 {
-			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-2) 0;
-		}
-
-		.action h4 {
-			margin: var(--uui-size-space-2) 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;
-		}
+uSyncProcessBox.styles = css `
+		:host {
+			display: block;
+		}
+
+		.header {
+			display: flex;
+			justify-content: center;
+			padding: var(uui-size-space-3);
+		}
+
+		h2 {
+			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-2) 0;
+		}
+
+		.action h4 {
+			margin: var(--uui-size-space-2) 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()

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

@@ -32,21 +32,21 @@ let uSyncResultRow = class uSyncResultRow extends UmbLitElement {
                 ? '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>
+        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) {
@@ -54,11 +54,11 @@ let uSyncResultRow = class uSyncResultRow extends UmbLitElement {
             result.change != ChangeType.IMPORT_FAIL) ||
             !result.message
             ? html `<em>${result.message}</em>`
-            : html ` <uui-button
-					look="outline"
-					color="danger"
-					label="View error"
-					compact
+            : 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>`;
     }
 };
@@ -81,51 +81,51 @@ _uSyncResultRow_viewError = async function _uSyncResultRow_viewError(e, result)
     });
     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;
-		}
-
-		:host:last-child {
-			background-color: blue;
-		}
-
-		.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;
-		}
+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;
+		}
+
+		:host:last-child {
+			background-color: blue;
+		}
+
+		.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 })

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

@@ -22,25 +22,25 @@ let uSyncResultGroupView = class uSyncResultGroupView extends UmbLitElement {
         const changeCount = this.getChangeCount() ?? 0;
         if (changeCount === 0 && !this.showAll)
             return nothing;
-        return html `
-			<uui-box
+        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>
-
-				${when(this.expanded == true, () => html `<uui-table>${this.renderGroupedRows(this.results)}</uui-table>`)}
-			</uui-box>
+        })}>
+				<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>
+
+				${when(this.expanded == true, () => html `<uui-table>${this.renderGroupedRows(this.results)}</uui-table>`)}
+			</uui-box>
 		`;
     }
     renderGroupedRows(results) {
@@ -52,52 +52,52 @@ let uSyncResultGroupView = class uSyncResultGroupView extends UmbLitElement {
         return rowsHtml;
     }
 };
-uSyncResultGroupView.styles = css `
-		uui-box {
-			cursor: pointer;
-			--uui-box-default-padding: 0;
-		}
-
-		uui-table {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
-
-		usync-result-row:last-child row {
-			border-bottom: none;
-		}
-
-		.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);
-		}
+uSyncResultGroupView.styles = css `
+		uui-box {
+			cursor: pointer;
+			--uui-box-default-padding: 0;
+		}
+
+		uui-table {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		usync-result-row:last-child row {
+			border-bottom: none;
+		}
+
+		.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()