@umbraco-cms/backoffice 17.1.0 → 17.2.0-rc

package/dist-cms/packages/umbraco-news/components/umb-news-card.element.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, customElement, html, nothing, property, unsafeHTML, when } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
+import { UUITextStyles } from '../../../external/uui/index.js';
 let UmbNewsCardElement = class UmbNewsCardElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -13,8 +14,8 @@ let UmbNewsCardElement = class UmbNewsCardElement extends UmbLitElement {
     }
     #renderHeading(priority, text) {
         if (priority <= 2)
-            return html `<h2 class="card-title">${text}</h2>`;
-        return html `<h3 class="card-title">${text}</h3>`;
+            return html `<h2 class="card-title uui-h3">${text}</h2>`;
+        return html `<h3 class="card-title uui-h4">${text}</h3>`;
     }
     render() {
         if (!this.item)
@@ -25,13 +26,13 @@ let UmbNewsCardElement = class UmbNewsCardElement extends UmbLitElement {
 			${when(showImage, () => this.item.imageUrl
             ? html `<img class="card-img" src=${this.item.imageUrl} alt=${this.item.imageAltText ?? ''} />`
             : html `<div class="card-img placeholder" aria-hidden="true"></div>`, () => nothing)}
-			<div class="card-body">
+			<div class="card-body uui-text">
 				${this.#renderHeading(this.priority, this.item.header)}
 				${this.item.body ? html `<div class="card-text">${unsafeHTML(this.item.body)}</div>` : nothing}
 				${!isLastRow && this.item.url
             ? html `<div class="card-actions">
 							<uui-button
-								look="outline"
+								look="primary"
 								href=${this.item.url}
 								target="_blank"
 								rel="noopener"
@@ -51,71 +52,98 @@ let UmbNewsCardElement = class UmbNewsCardElement extends UmbLitElement {
                 : html ` <article class="card normal-priority" role="listitem">${content}</article> `
             : html ` <article class="card" role="listitem">${content}</article> `;
     }
-    static { this.styles = css `
-		:host {
-			display: block;
-			height: 100%;
-		}
-
-		.card {
-			background: var(--uui-color-surface);
-			border-radius: var(--uui-border-radius, 8px);
-			box-shadow: var(
-				--uui-box-box-shadow,
-				var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))
-			);
-			overflow: hidden;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-		}
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: block;
+				height: 100%;
+			}
 
-		.card-img {
-			width: 100%;
-			object-fit: cover;
-			display: block;
-		}
+			.card {
+				background: var(--uui-color-surface);
+				/* TODO: update with variables when UUI v.2 is available */
+				border-radius: 16px;
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
 
-		.card-img.placeholder {
-			height: 8px;
-		}
+			.card-img {
+				width: 100%;
+				object-fit: cover;
+				display: block;
+			}
 
-		.card-body {
-			display: flex;
-			flex-direction: column;
-			padding: var(--uui-size-space-5);
-			flex: 1 1 auto;
-			justify-content: space-between;
-			gap: var(--uui-size-space-3, 9px);
-		}
+			.card-img.placeholder {
+				height: 8px;
+			}
 
-		.card-title {
-			margin: 0;
-		}
+			/* TODO: update with uui-styles when UUI v.2 is available */
+			.card-body.uui-text h2,
+			.card-body.uui-text h3 {
+				font-weight: 400;
+				line-height: 35px;
+			}
 
-		.card-text > p {
-			margin: 0;
-		}
+			.card-body.uui-text h2 {
+				margin-top: -0.2em;
+				margin-bottom: 0;
+			}
 
-		.normal-priority {
-			display: block;
-			border: 1px solid var(--uui-color-divider);
-			border-radius: var(--uui-border-radius, 8px);
-			text-decoration: none;
-			color: inherit;
-			overflow: hidden;
+			.card-body.uui-text h3 {
+				margin-top: -0.5em;
+				margin-bottom: var(--uui-size-space-3);
+			}
 
 			.card-body {
-				gap: 0;
+				display: flex;
+				flex-direction: column;
+				padding: var(--uui-size-layout-2);
+				flex: 1 1 auto;
+				justify-content: space-between;
+				gap: var(--uui-size-space-4);
+				max-width: 60em;
+			}
+
+			.card-title {
+				margin: 0;
+			}
+
+			.card-text {
+				justify-self: start;
+			}
+			.card-text > p {
+				margin: 0;
+			}
+
+			.normal-priority {
+				display: block;
+				text-decoration: none;
+				color: inherit;
+				overflow: hidden;
+
+				.card-body {
+					gap: 0;
+				}
+			}
+			.normal-priority:hover {
+				color: var(--uui-color-interactive-emphasis);
+			}
+			.card-actions {
+				margin-top: auto;
+				padding-top: var(--uui-size-3);
+				align-self: start;
+				justify-self: end;
+			}
+			/* TODO: update accordingly to uui-button when UUI v.2 is available */
+			.card-actions uui-button {
+				--uui-button-background-color: #283a97;
+				--uui-button-border-radius: 16px;
 			}
-		}
-		.normal-priority:hover {
-			color: var(--uui-color-interactive-emphasis);
-		}
-		.card-actions {
-			align-self: end;
-		}
-	`; }
+		`,
+    ]; }
 };
 __decorate([
     property({ type: Object })

package/dist-cms/packages/umbraco-news/components/umb-news-container.element.js

@@ -52,7 +52,7 @@ let UmbNewsContainerElement = class UmbNewsContainerElement extends UmbLitElemen
     static { this.styles = css `
 		.cards {
 			--cols: 4;
-			--gap: var(--uui-size-space-4);
+			--gap: var(--uui-size-space-5);
 			width: 100%;
 			display: grid;
 			grid-template-columns: repeat(auto-fit, minmax(calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), 1fr));

package/dist-cms/packages/user/current-user/conditions/group-id/group-id.condition.manifest.js

@@ -1,7 +1,8 @@
 import { UMB_CURRENT_USER_GROUP_ID_CONDITION_ALIAS } from './constants.js';
+import { UmbCurrentUserGroupCondition } from './group-id.condition.js';
 export const manifest = {
     type: 'condition',
     name: 'Current user group id Condition',
     alias: UMB_CURRENT_USER_GROUP_ID_CONDITION_ALIAS,
-    api: () => import('./group-id.condition.js'),
+    api: UmbCurrentUserGroupCondition,
 };

package/dist-cms/packages/user/current-user/conditions/is-admin/is-admin.condition.d.ts

@@ -1,7 +1,7 @@
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 import type { UmbConditionConfigBase, UmbConditionControllerArguments, UmbExtensionCondition } from '../../../../../libs/extension-api/index.js';
 import { UmbConditionBase } from '../../../../core/extension-registry/index.js';
-export declare class UmbContentHasPropertiesWorkspaceCondition extends UmbConditionBase<UmbConditionConfigBase> implements UmbExtensionCondition {
+export declare class UmbCurrentUserIsAdminCondition extends UmbConditionBase<UmbConditionConfigBase> implements UmbExtensionCondition {
     constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<UmbConditionConfigBase>);
 }
-export { UmbContentHasPropertiesWorkspaceCondition as api };
+export { UmbCurrentUserIsAdminCondition as api };

package/dist-cms/packages/user/current-user/conditions/is-admin/is-admin.condition.js

@@ -1,9 +1,9 @@
 import { isCurrentUserAnAdmin } from '../../utils/index.js';
 import { UmbConditionBase } from '../../../../core/extension-registry/index.js';
-export class UmbContentHasPropertiesWorkspaceCondition extends UmbConditionBase {
+export class UmbCurrentUserIsAdminCondition extends UmbConditionBase {
     constructor(host, args) {
         super(host, args);
         isCurrentUserAnAdmin(host).then((isAdmin) => (this.permitted = isAdmin));
     }
 }
-export { UmbContentHasPropertiesWorkspaceCondition as api };
+export { UmbCurrentUserIsAdminCondition as api };

package/dist-cms/packages/user/current-user/conditions/is-admin/is-admin.condition.manifest.js

@@ -1,7 +1,8 @@
 import { UMB_CURRENT_USER_IS_ADMIN_CONDITION_ALIAS } from './constants.js';
+import { UmbCurrentUserIsAdminCondition } from './is-admin.condition.js';
 export const manifest = {
     type: 'condition',
     name: 'Current user is admin Condition',
     alias: UMB_CURRENT_USER_IS_ADMIN_CONDITION_ALIAS,
-    api: () => import('./is-admin.condition.js'),
+    api: UmbCurrentUserIsAdminCondition,
 };

package/dist-cms/packages/user/current-user/history/manifests.js

@@ -1,3 +1,4 @@
+import { UmbCurrentUserHistoryStore } from './current-user-history.store.js';
 export const manifests = [
     {
         type: 'userProfileApp',
@@ -14,6 +15,6 @@ export const manifests = [
         type: 'store',
         alias: 'Umb.Store.CurrentUser.History',
         name: 'Current User History Store',
-        api: () => import('./current-user-history.store.js'),
+        api: UmbCurrentUserHistoryStore,
     },
 ];

package/dist-cms/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.d.ts

@@ -4,6 +4,8 @@ export declare class UmbCurrentUserMfaModalElement extends UmbLitElement {
     #private;
     modalContext?: UmbModalContext;
     private _items;
+    private _isLoading;
+    private _error?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];

package/dist-cms/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.js

@@ -18,39 +18,65 @@ let UmbCurrentUserMfaModalElement = class UmbCurrentUserMfaModalElement extends
     constructor() {
         super();
         this._items = [];
+        this._isLoading = true;
         this.#currentUserRepository = new UmbCurrentUserRepository(this);
         this.#loadProviders();
     }
     async #loadProviders() {
-        const serverLoginProviders$ = (await this.#currentUserRepository.requestMfaLoginProviders()).asObservable();
-        const manifestLoginProviders$ = umbExtensionsRegistry.byType('mfaLoginProvider');
-        // Merge the server and manifest providers to get the final list of providers
-        const mfaLoginProviders$ = mergeObservables([serverLoginProviders$, manifestLoginProviders$], ([serverLoginProviders, manifestLoginProviders]) => {
-            return manifestLoginProviders.map((manifestLoginProvider) => {
-                const serverLoginProvider = serverLoginProviders.find((serverLoginProvider) => serverLoginProvider.providerName === manifestLoginProvider.forProviderName);
-                return {
-                    existsOnServer: !!serverLoginProvider,
-                    isEnabledOnUser: serverLoginProvider?.isEnabledOnUser ?? false,
-                    providerName: serverLoginProvider?.providerName ?? manifestLoginProvider.forProviderName,
-                    displayName: manifestLoginProvider.meta?.label ?? serverLoginProvider?.providerName ?? manifestLoginProvider.name,
-                };
+        this._isLoading = true;
+        this._error = undefined;
+        try {
+            const serverLoginProvidersResponse = await this.#currentUserRepository.requestMfaLoginProviders();
+            if (serverLoginProvidersResponse.error) {
+                this._error = this.localize.term('errors_defaultError');
+                this._isLoading = false;
+                return;
+            }
+            const serverLoginProviders$ = serverLoginProvidersResponse.asObservable();
+            const manifestLoginProviders$ = umbExtensionsRegistry.byType('mfaLoginProvider');
+            // Merge the server and manifest providers to get the final list of providers
+            const mfaLoginProviders$ = mergeObservables([serverLoginProviders$, manifestLoginProviders$], ([serverLoginProviders, manifestLoginProviders]) => {
+                return manifestLoginProviders.map((manifestLoginProvider) => {
+                    const serverLoginProvider = serverLoginProviders.find((serverLoginProvider) => serverLoginProvider.providerName === manifestLoginProvider.forProviderName);
+                    return {
+                        existsOnServer: !!serverLoginProvider,
+                        isEnabledOnUser: serverLoginProvider?.isEnabledOnUser ?? false,
+                        providerName: serverLoginProvider?.providerName ?? manifestLoginProvider.forProviderName,
+                        displayName: manifestLoginProvider.meta?.label ?? serverLoginProvider?.providerName ?? manifestLoginProvider.name,
+                    };
+                });
             });
-        });
-        this.observe(mfaLoginProviders$, (providers) => {
-            this._items = providers;
-        }, '_mfaLoginProviders');
+            this.observe(mfaLoginProviders$, (providers) => {
+                this._items = providers;
+                this._isLoading = false;
+            }, '_mfaLoginProviders');
+        }
+        catch {
+            this._error = this.localize.term('errors_defaultError');
+            this._isLoading = false;
+        }
     }
     #close() {
         this.modalContext?.submit();
     }
+    #renderContent() {
+        if (this._isLoading) {
+            return html `<div id="loader"><uui-loader></uui-loader></div>`;
+        }
+        if (this._error) {
+            return html `<p>${this._error}</p>`;
+        }
+        if (this._items.length > 0) {
+            return html `
+				${repeat(this._items, (item) => item.providerName, (item) => this.#renderProvider(item))}
+			`;
+        }
+        return nothing;
+    }
     render() {
         return html `
 			<umb-body-layout headline="${this.localize.term('member_2fa')}">
-				<div id="main">
-					${when(this._items.length > 0, () => html `
-							${repeat(this._items, (item) => item.providerName, (item) => this.#renderProvider(item))}
-						`)}
-				</div>
+				<div id="main">${this.#renderContent()}</div>
 				<div slot="actions">
 					<uui-button @click=${this.#close} look="secondary" .label=${this.localize.term('general_close')}></uui-button>
 				</div>
@@ -122,6 +148,12 @@ let UmbCurrentUserMfaModalElement = class UmbCurrentUserMfaModalElement extends
 			uui-box {
 				margin-bottom: var(--uui-size-space-3);
 			}
+
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 		`,
     ]; }
 };
@@ -131,6 +163,12 @@ __decorate([
 __decorate([
     state()
 ], UmbCurrentUserMfaModalElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbCurrentUserMfaModalElement.prototype, "_isLoading", void 0);
+__decorate([
+    state()
+], UmbCurrentUserMfaModalElement.prototype, "_error", void 0);
 UmbCurrentUserMfaModalElement = __decorate([
     customElement('umb-current-user-mfa-modal')
 ], UmbCurrentUserMfaModalElement);

package/dist-cms/packages/user/current-user/repository/current-user.repository.js

@@ -115,6 +115,10 @@ export class UmbCurrentUserRepository extends UmbRepositoryBase {
             const notification = { data: { message: `Password changed` } };
             this.notificationContext?.peek('positive', notification);
         }
+        else {
+            const notification = { data: { message: error.message ?? 'Unknown failure' } };
+            this.notificationContext?.peek('danger', notification);
+        }
         return { data, error };
     }
 }

package/dist-cms/packages/user/current-user/repository/current-user.server.data-source.js

@@ -118,6 +118,6 @@ export class UmbCurrentUserServerDataSource extends UmbControllerBase {
                 newPassword,
                 oldPassword,
             },
-        }));
+        }), { disableNotifications: true });
     }
 }

package/dist-cms/packages/user/current-user/repository/manifests.js

@@ -1,4 +1,6 @@
 import { UMB_CURRENT_USER_STORE_ALIAS, UMB_CURRENT_USER_REPOSITORY_ALIAS, UMB_CURRENT_USER_CONFIG_REPOSITORY_ALIAS, UMB_CURRENT_USER_CONFIG_STORE_ALIAS, } from './constants.js';
+import { UmbCurrentUserStore } from './current-user.store.js';
+import { UmbCurrentUserConfigStore } from './current-user-config.store.js';
 export const manifests = [
     {
         type: 'repository',
@@ -10,13 +12,13 @@ export const manifests = [
         type: 'store',
         alias: UMB_CURRENT_USER_STORE_ALIAS,
         name: 'Current User Store',
-        api: () => import('./current-user.store.js'),
+        api: UmbCurrentUserStore,
     },
     {
         type: 'store',
         alias: UMB_CURRENT_USER_CONFIG_STORE_ALIAS,
         name: 'Current User Config Store',
-        api: () => import('./current-user-config.store.js'),
+        api: UmbCurrentUserConfigStore,
     },
     {
         type: 'repository',

package/dist-cms/packages/user/user/client-credential/create/modal/create-user-client-credential-modal.element.d.ts

@@ -1,16 +1,15 @@
 import type { UmbCreateUserClientCredentialModalData, UmbCreateUserClientCredentialModalValue } from './create-user-client-credential-modal.token.js';
 import { UmbModalBaseElement } from '../../../../../core/modal/index.js';
-declare const elementName = "umb-create-user-client-credential-modal";
-export declare class UmbCreateUserModalElement extends UmbModalBaseElement<UmbCreateUserClientCredentialModalData, UmbCreateUserClientCredentialModalValue> {
+export declare class UmbCreateUserClientCredentialModalElement extends UmbModalBaseElement<UmbCreateUserClientCredentialModalData, UmbCreateUserClientCredentialModalValue> {
     #private;
     private _inputUniqueElement?;
     protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
-export { UmbCreateUserModalElement as element };
+export { UmbCreateUserClientCredentialModalElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbCreateUserModalElement;
+        'umb-create-user-client-credential-modal': UmbCreateUserClientCredentialModalElement;
     }
 }

package/dist-cms/packages/user/user/client-credential/create/modal/create-user-client-credential-modal.element.js

@@ -8,8 +8,7 @@ import { UmbUserClientCredentialRepository } from '../../repository/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { css, html, customElement, query } from '../../../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../../../core/modal/index.js';
-const elementName = 'umb-create-user-client-credential-modal';
-let UmbCreateUserModalElement = class UmbCreateUserModalElement extends UmbModalBaseElement {
+let UmbCreateUserClientCredentialModalElement = class UmbCreateUserClientCredentialModalElement extends UmbModalBaseElement {
     #userClientCredentialRepository = new UmbUserClientCredentialRepository(this);
     #uniquePrefix = 'umbraco-back-office-';
     firstUpdated() {
@@ -101,9 +100,9 @@ let UmbCreateUserModalElement = class UmbCreateUserModalElement extends UmbModal
 };
 __decorate([
     query('#unique')
-], UmbCreateUserModalElement.prototype, "_inputUniqueElement", void 0);
-UmbCreateUserModalElement = __decorate([
-    customElement(elementName)
-], UmbCreateUserModalElement);
-export { UmbCreateUserModalElement };
-export { UmbCreateUserModalElement as element };
+], UmbCreateUserClientCredentialModalElement.prototype, "_inputUniqueElement", void 0);
+UmbCreateUserClientCredentialModalElement = __decorate([
+    customElement('umb-create-user-client-credential-modal')
+], UmbCreateUserClientCredentialModalElement);
+export { UmbCreateUserClientCredentialModalElement };
+export { UmbCreateUserClientCredentialModalElement as element };

package/dist-cms/packages/user/user/collection/action/manifests.js

@@ -1,4 +1,5 @@
 import { UMB_USER_COLLECTION_ALIAS } from '../constants.js';
+import { UMB_IN_MODAL_CONDITION_ALIAS } from '../../../../core/modal/index.js';
 import { UMB_COLLECTION_ALIAS_CONDITION } from '../../../../core/collection/index.js';
 export const manifests = [
     {
@@ -11,6 +12,10 @@ export const manifests = [
                 alias: UMB_COLLECTION_ALIAS_CONDITION,
                 match: UMB_USER_COLLECTION_ALIAS,
             },
+            {
+                alias: UMB_IN_MODAL_CONDITION_ALIAS,
+                match: false,
+            },
         ],
     },
 ];

package/dist-cms/packages/user/user/collection/item/user-collection-item-card.element.js

@@ -106,6 +106,8 @@ let UmbUserCollectionItemCardElement = class UmbUserCollectionItemCardElement ex
         css `
 			uui-card-user {
 				width: 100%;
+				min-width: auto;
+				height: 100%;
 				justify-content: normal;
 				padding-top: var(--uui-size-space-5);
 				flex-direction: column;

package/dist-cms/packages/user/user/collection/user-collection-header.element.js

@@ -109,7 +109,7 @@ let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement extend
     }
     #renderStatusFilter() {
         return html `
-			<uui-button popovertarget="popover-user-status-filter" label="status">
+			<uui-button popovertarget="popover-user-status-filter" label="status" compact>
 				<umb-localize key="general_status"></umb-localize>: <b>${this.#getStatusFilterLabel()}</b>
 			</uui-button>
 			<uui-popover-container id="popover-user-status-filter" placement="bottom">
@@ -127,7 +127,7 @@ let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement extend
     }
     #renderUserGroupFilter() {
         return html `
-			<uui-button popovertarget="popover-user-group-filter" label=${this.localize.term('general_groups')}>
+			<uui-button popovertarget="popover-user-group-filter" label=${this.localize.term('general_groups')} compact>
 				<umb-localize key="general_groups"></umb-localize>: <b>${this.#getUserGroupFilterLabel()}</b>
 			</uui-button>
 			<uui-popover-container id="popover-user-group-filter" placement="bottom">
@@ -146,7 +146,7 @@ let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement extend
     }
     #renderOrderBy() {
         return html `
-			<uui-button popovertarget="popover-order-by-filter" label="order by">
+			<uui-button popovertarget="popover-order-by-filter" label="order by" compact>
 				<umb-localize key="general_orderBy"></umb-localize>:
 				<b> ${this._activeOrderByOption ? this.localize.string(this._activeOrderByOption.label) : ''}</b>
 			</uui-button>
@@ -179,7 +179,7 @@ let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement extend
 			#toolbar {
 				flex: 1;
 				display: flex;
-				gap: var(--uui-size-space-5);
+				gap: var(--uui-size-space-4);
 				justify-content: space-between;
 				align-items: center;
 			}

package/dist-cms/packages/user/user/collection/views/table/user-table-collection-view.element.d.ts

@@ -1,16 +1,14 @@
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import type { UmbUserDetailModel } from '../../../types.js';
+import { UmbCollectionViewElementBase } from '../../../../../core/collection/index.js';
 import './column-layouts/name/user-table-name-column-layout.element.js';
 import './column-layouts/status/user-table-status-column-layout.element.js';
-export declare class UmbUserTableCollectionViewElement extends UmbLitElement {
+export declare class UmbUserTableCollectionViewElement extends UmbCollectionViewElementBase {
     #private;
-    private _tableConfig;
     private _tableColumns;
     private _tableItems;
     private _userGroupItems;
-    private _users;
-    private _selection;
-    private _itemHrefs;
-    constructor();
+    protected _items: Array<UmbUserDetailModel>;
+    updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }