@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

package/dist-cms/packages/tiptap/extensions/media-picker/media-picker.tiptap-toolbar-api.js

@@ -1,3 +1,4 @@
+import { NodeSelection } from '../../externals.js';
 import { UmbTiptapToolbarElementApiBase } from '../tiptap-toolbar-element-api-base.js';
 import { getGuidFromUdi, imageSize } from '../../../core/utils/index.js';
 import { ImageCropModeModel } from '../../../core/backend-api/index.js';
@@ -31,31 +32,56 @@ export default class UmbTiptapToolbarMediaPickerToolbarExtensionApi extends UmbT
     }
     async execute(editor) {
         const currentTarget = editor.getAttributes('image');
-        const figure = editor.getAttributes('figure');
-        let currentMediaUdi = undefined;
-        if (currentTarget?.['data-udi']) {
-            currentMediaUdi = getGuidFromUdi(currentTarget['data-udi']);
-        }
-        let currentAltText = undefined;
-        if (currentTarget?.alt) {
-            currentAltText = currentTarget.alt;
-        }
-        let currentCaption = undefined;
-        if (figure?.figcaption) {
-            currentCaption = figure.figcaption;
-        }
-        const selection = await this.#openMediaPicker(currentMediaUdi);
-        if (!selection?.length)
+        const currentMediaUdi = this.#extractMediaUdi(currentTarget);
+        const currentAltText = currentTarget?.alt;
+        const currentCaption = this.#extractCaption(editor.state.selection);
+        await this.#updateImageWithMetadata(editor, currentMediaUdi, currentAltText, currentCaption);
+    }
+    async #updateImageWithMetadata(editor, currentMediaUdi, currentAltText, currentCaption) {
+        const mediaGuid = await this.#getMediaGuid(currentMediaUdi);
+        if (!mediaGuid)
             return;
-        const mediaGuid = selection[0];
-        if (!mediaGuid) {
-            throw new Error('No media selected');
-        }
         const media = await this.#showMediaCaptionAltText(mediaGuid, currentAltText, currentCaption);
         if (!media)
             return;
         this.#insertInEditor(editor, mediaGuid, media);
     }
+    #extractMediaUdi(imageAttributes) {
+        return imageAttributes?.['data-udi'] ? getGuidFromUdi(imageAttributes['data-udi']) : undefined;
+    }
+    #extractCaption(selection) {
+        if (!(selection instanceof NodeSelection))
+            return undefined;
+        if (selection.node.type.name !== 'figure')
+            return undefined;
+        return this.#findFigcaptionText(selection.node);
+    }
+    #findFigcaptionText(figureNode) {
+        let caption;
+        figureNode.descendants((child) => {
+            if (child.type.name === 'figcaption') {
+                caption = child.textContent || undefined;
+                return false; // Stop searching
+            }
+            return true; // Continue searching
+        });
+        return caption;
+    }
+    async #getMediaGuid(currentMediaUdi) {
+        if (currentMediaUdi) {
+            // Image already exists, go directly to edit alt text/caption
+            return currentMediaUdi;
+        }
+        // No image selected, open media picker
+        const selection = await this.#openMediaPicker();
+        if (!selection?.length)
+            return undefined;
+        const selectedGuid = selection[0];
+        if (!selectedGuid) {
+            throw new Error('No media selected');
+        }
+        return selectedGuid;
+    }
     async #openMediaPicker(currentMediaUdi) {
         const modalHandler = this.#modalManager?.open(this, UMB_MEDIA_PICKER_MODAL, {
             data: {

package/dist-cms/packages/tiptap/externals.d.ts

@@ -4,6 +4,8 @@ export { Document } from '@tiptap/extension-document';
 export { HardBreak } from '@tiptap/extension-hard-break';
 export { Paragraph } from '@tiptap/extension-paragraph';
 export { Text } from '@tiptap/extension-text';
+export { NodeSelection } from '@tiptap/pm/state';
+export type { Node as ProseMirrorNode } from '@tiptap/pm/model';
 export { Blockquote } from '@tiptap/extension-blockquote';
 export { Bold } from '@tiptap/extension-bold';
 export { BulletList, OrderedList, ListItem } from '@tiptap/extension-list';

package/dist-cms/packages/tiptap/externals.js

@@ -12,6 +12,8 @@ export { Document } from '@tiptap/extension-document';
 export { HardBreak } from '@tiptap/extension-hard-break';
 export { Paragraph } from '@tiptap/extension-paragraph';
 export { Text } from '@tiptap/extension-text';
+// PROSEMIRROR TYPES
+export { NodeSelection } from '@tiptap/pm/state';
 // OPTIONAL EXTENSIONS
 export { Blockquote } from '@tiptap/extension-blockquote';
 export { Bold } from '@tiptap/extension-bold';

package/dist-cms/packages/tiptap/property-editors/tiptap-rte/manifests.js

@@ -5,7 +5,7 @@ export const manifests = [
         name: 'Rich Text Editor [Tiptap] Property Editor UI',
         element: () => import('./property-editor-ui-tiptap.element.js'),
         meta: {
-            label: 'Rich Text Editor [Tiptap]',
+            label: '#rte_label',
             propertyEditorSchemaAlias: 'Umbraco.RichText',
             icon: 'icon-browser-window',
             group: 'richContent',

package/dist-cms/packages/tiptap/umbraco-package.js

@@ -2,7 +2,7 @@ export const name = 'Umbraco.Core.Tiptap';
 export const extensions = [
     {
         name: 'Tiptap Bundle',
-        alias: 'Umb.Bundle.tiptap',
+        alias: 'Umb.Bundle.Tiptap',
         type: 'bundle',
         js: () => import('./manifests.js'),
     },

package/dist-cms/packages/ufm/components/content-name/content-name.element.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbUfmElementBase } from '../ufm-element-base.js';
 import { UMB_UFM_RENDER_CONTEXT } from '../ufm-render/ufm-render.context.js';
 import { customElement, property } from '../../../../external/lit/index.js';
-import { UmbDocumentItemRepository, UMB_DOCUMENT_ENTITY_TYPE } from '../../../documents/documents/index.js';
+import { UmbDocumentItemDataResolver, UmbDocumentItemRepository, UMB_DOCUMENT_ENTITY_TYPE, } from '../../../documents/documents/index.js';
 import { UmbId } from '../../../core/id/index.js';
 import { UmbMediaItemRepository, UMB_MEDIA_ENTITY_TYPE } from '../../../media/media/index.js';
 import { UmbMemberItemRepository, UMB_MEMBER_ENTITY_TYPE } from '../../../members/member/index.js';
@@ -38,7 +38,7 @@ let UmbUfmContentNameElement = class UmbUfmContentNameElement extends UmbUfmElem
             if (item.mediaKey)
                 return UMB_MEDIA_ENTITY_TYPE;
         }
-        return null;
+        return UMB_DOCUMENT_ENTITY_TYPE;
     }
     #getUniques(value) {
         if (Array.isArray(value)) {
@@ -52,7 +52,16 @@ let UmbUfmContentNameElement = class UmbUfmContentNameElement extends UmbUfmElem
             if (repository) {
                 const { data } = await repository.requestItems(uniques);
                 if (Array.isArray(data) && data.length > 0) {
-                    // TODO: [v17] Review usage of `item.variants[0].name` as this needs to be implemented properly! [LK]
+                    if (entityType === UMB_DOCUMENT_ENTITY_TYPE) {
+                        const namePromises = data.map(async (item) => {
+                            const resolver = new UmbDocumentItemDataResolver(this);
+                            resolver.setData(item);
+                            return await resolver.getName();
+                        });
+                        const names = await Promise.all(namePromises);
+                        return names.join(', ');
+                    }
+                    // TODO: Review usage of `item.variants[0].name` as this needs to be implemented properly for media/member items [LK]
                     return data.map((item) => item.variants[0].name).join(', ');
                 }
             }

package/dist-cms/packages/ufm/components/ufm-element-base.d.ts

@@ -5,5 +5,5 @@ export declare abstract class UmbUfmElementBase extends UmbLitElement {
     get filters(): string | undefined;
     value?: unknown;
     constructor();
-    render(): string;
+    render(): string | undefined;
 }

package/dist-cms/packages/ufm/components/ufm-element-base.js

@@ -31,6 +31,8 @@ export class UmbUfmElementBase extends UmbLitElement {
         });
     }
     render() {
+        if (!this.isConnected)
+            return;
         let values = Array.isArray(this.value) ? this.value : [this.value];
         if (this.#filterFuncArgs) {
             const missing = new Set();

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

@@ -0,0 +1,16 @@
+import { nothing } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import type { NewsDashboardItemResponseModel } from '../../core/backend-api/index.js';
+export declare class UmbNewsCardElement extends UmbLitElement {
+    #private;
+    item: NewsDashboardItemResponseModel;
+    priority: number;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UmbNewsCardElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-news-card': UmbNewsCardElement;
+    }
+}

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

@@ -0,0 +1,130 @@
+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 { css, customElement, html, nothing, property, unsafeHTML, when } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+let UmbNewsCardElement = class UmbNewsCardElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.priority = 3;
+    }
+    #renderHeading(priority, text) {
+        if (priority <= 2)
+            return html `<h2 class="card-title">${text}</h2>`;
+        return html `<h3 class="card-title">${text}</h3>`;
+    }
+    render() {
+        if (!this.item)
+            return nothing;
+        const isLastRow = this.priority === 3;
+        const showImage = this.priority <= 2 && !!this.item.imageUrl;
+        const content = html `
+			${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">
+				${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"
+								href=${this.item.url}
+								target="_blank"
+								rel="noopener"
+								label=${this.item.buttonText || 'Open'}></uui-button>
+						</div>`
+            : nothing}
+			</div>
+		`;
+        // Last row: whole card is a link
+        return isLastRow
+            ? this.item.url
+                ? html `
+						<a class="card normal-priority" role="listitem" href=${this.item.url} target="_blank" rel="noopener">
+							${content}
+						</a>
+					`
+                : 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%;
+		}
+
+		.card-img {
+			width: 100%;
+			object-fit: cover;
+			display: block;
+		}
+
+		.card-img.placeholder {
+			height: 8px;
+		}
+
+		.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-title {
+			margin: 0;
+		}
+
+		.card-text > p {
+			margin: 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 {
+				gap: 0;
+			}
+		}
+		.normal-priority:hover {
+			color: var(--uui-color-interactive-emphasis);
+		}
+		.card-actions {
+			align-self: end;
+		}
+	`; }
+};
+__decorate([
+    property({ type: Object })
+], UmbNewsCardElement.prototype, "item", void 0);
+__decorate([
+    property({ type: Number })
+], UmbNewsCardElement.prototype, "priority", void 0);
+UmbNewsCardElement = __decorate([
+    customElement('umb-news-card')
+], UmbNewsCardElement);
+export { UmbNewsCardElement };
+export default UmbNewsCardElement;

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

@@ -0,0 +1,16 @@
+import { nothing } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import type { NewsDashboardItemResponseModel } from '../../core/backend-api/index.js';
+import './umb-news-card.element.js';
+export declare class UmbNewsContainerElement extends UmbLitElement {
+    #private;
+    items: Array<NewsDashboardItemResponseModel>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UmbNewsContainerElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-news-container': UmbNewsContainerElement;
+    }
+}

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

@@ -0,0 +1,97 @@
+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 { css, customElement, html, nothing, property, repeat } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import './umb-news-card.element.js';
+import { sanitizeHTML } from '../../core/utils/index.js';
+let UmbNewsContainerElement = class UmbNewsContainerElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
+    #groupItemsByPriority(items) {
+        const sanitizedItems = items.map((i) => ({
+            ...i,
+            body: i.body ? sanitizeHTML(i.body) : '',
+        }));
+        // Separate items by priority.
+        const priority1 = sanitizedItems.filter((item) => item.priority === 'High');
+        const priority2 = sanitizedItems.filter((item) => item.priority === 'Medium');
+        const priority3 = sanitizedItems.filter((item) => item.priority === 'Normal');
+        // Group 1: First 4 items from priority 1.
+        const group1Items = priority1.slice(0, 4);
+        const overflow1 = priority1.slice(4);
+        // Group 2: Overflow from priority 1 + priority 2 items (max 4 total).
+        const group2Items = [...overflow1, ...priority2].slice(0, 4);
+        const overflow2Count = overflow1.length + priority2.length - 4;
+        const overflow2 = overflow2Count > 0 ? [...overflow1, ...priority2].slice(4) : [];
+        // Group 3: Overflow from groups 1 & 2 + priority 3 items.
+        const group3Items = [...overflow2, ...priority3];
+        return [
+            { priority: 1, items: group1Items },
+            { priority: 2, items: group2Items },
+            { priority: 3, items: group3Items },
+        ];
+    }
+    render() {
+        if (!this.items?.length)
+            return nothing;
+        const groups = this.#groupItemsByPriority(this.items);
+        return html `
+			${repeat(groups, (g) => g.priority, (g) => html `
+					<div class="cards" role="list" aria-label=${`Priority ${g.priority}`}>
+						${repeat(g.items, (i, idx) => i.url || i.header || idx, (i) => html `<umb-news-card .item=${i} .priority=${g.priority}></umb-news-card>`)}
+					</div>
+				`)}
+		`;
+    }
+    static { this.styles = css `
+		.cards {
+			--cols: 4;
+			--gap: var(--uui-size-space-4);
+			width: 100%;
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), 1fr));
+			gap: var(--gap);
+		}
+
+		.cards + .cards {
+			margin-top: var(--uui-size-space-5);
+		}
+
+		/* For when container-type is not been assigned, not so sure about it???*/
+		@media (max-width: 1200px) {
+			.cards {
+				grid-template-columns: repeat(auto-fit, minmax(2, 1fr));
+			}
+		}
+		@media (max-width: 700px) {
+			.cards {
+				grid-template-columns: 1fr;
+			}
+		}
+
+		@container dashboard (max-width: 1200px) {
+			.cards {
+				grid-template-columns: repeat(auto-fit, minmax(2, 1fr));
+			}
+		}
+		@container dashboard (max-width: 700px) {
+			.cards {
+				grid-template-columns: 1fr;
+			}
+		}
+	`; }
+};
+__decorate([
+    property({ type: Array })
+], UmbNewsContainerElement.prototype, "items", void 0);
+UmbNewsContainerElement = __decorate([
+    customElement('umb-news-container')
+], UmbNewsContainerElement);
+export { UmbNewsContainerElement };
+export default UmbNewsContainerElement;

package/dist-cms/packages/umbraco-news/umbraco-news-dashboard.element.d.ts

@@ -1,8 +1,8 @@
 import { UmbLitElement } from '../core/lit-element/index.js';
+import './components/umb-news-container.element.js';
 export declare class UmbUmbracoNewsDashboardElement extends UmbLitElement {
     #private;
     private _items;
-    private _groupedItems;
     private _loaded;
     firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/umbraco-news/umbraco-news-dashboard.element.js

@@ -5,15 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbNewsDashboardRepository } from './repository/index.js';
-import { css, customElement, html, nothing, repeat, state, unsafeHTML, when, } from '../../external/lit/index.js';
-import { sanitizeHTML } from '../core/utils/index.js';
+import { css, customElement, html, state } from '../../external/lit/index.js';
 import { UmbLitElement } from '../core/lit-element/index.js';
 import { UmbTextStyles } from '../core/style/index.js';
+import './components/umb-news-container.element.js';
 let UmbUmbracoNewsDashboardElement = class UmbUmbracoNewsDashboardElement extends UmbLitElement {
     constructor() {
         super(...arguments);
         this._items = [];
-        this._groupedItems = [];
         this._loaded = false;
         this.#repo = new UmbNewsDashboardRepository(this);
     }
@@ -21,33 +20,8 @@ let UmbUmbracoNewsDashboardElement = class UmbUmbracoNewsDashboardElement extend
     async firstUpdated() {
         const res = await this.#repo.getNewsDashboard();
         this._items = res.data?.items ?? [];
-        this._groupedItems = this.#groupItemsByPriority();
         this._loaded = true;
     }
-    #groupItemsByPriority() {
-        const sanitizedItems = this._items.map((i) => ({
-            ...i,
-            body: i.body ? sanitizeHTML(i.body) : '',
-        }));
-        // Separate items by priority.
-        const priority1 = sanitizedItems.filter((item) => item.priority === 'High');
-        const priority2 = sanitizedItems.filter((item) => item.priority === 'Medium');
-        const priority3 = sanitizedItems.filter((item) => item.priority === 'Normal');
-        // Group 1: First 4 items from priority 1.
-        const group1Items = priority1.slice(0, 4);
-        const overflow1 = priority1.slice(4);
-        // Group 2: Overflow from priority 1 + priority 2 items (max 4 total).
-        const group2Items = [...overflow1, ...priority2].slice(0, 4);
-        const overflow2Count = overflow1.length + priority2.length - 4;
-        const overflow2 = overflow2Count > 0 ? [...overflow1, ...priority2].slice(4) : [];
-        // Group 3: Overflow from groups 1 & 2 + priority 3 items.
-        const group3Items = [...overflow2, ...priority3];
-        return [
-            { priority: 1, items: group1Items },
-            { priority: 2, items: group2Items },
-            { priority: 3, items: group3Items },
-        ];
-    }
     render() {
         if (!this._loaded) {
             return html `<div class="loader"><uui-loader></uui-loader></div>`;
@@ -55,43 +29,7 @@ let UmbUmbracoNewsDashboardElement = class UmbUmbracoNewsDashboardElement extend
         if (this._items.length === 0) {
             return this.#renderDefaultContent();
         }
-        return html `
-			${repeat(this._groupedItems, (g) => g.priority, (g) => html `
-					<div class="cards">
-						${repeat(g.items, (i, idx) => i.url || i.header || idx, (i) => {
-            const isLastRow = g.priority === 3;
-            const content = html `
-									${when(g.priority <= 2, () => html `${i.imageUrl
-                ? html `<img class="card-img" src=${i.imageUrl} alt=${i.imageAltText ?? ''} />`
-                : html `<div class="card-img placeholder" aria-hidden="true"></div>`}`, () => nothing)}
-									<div class="card-body">
-										${g.priority <= 2
-                ? html `<h2 class="card-title">${i.header}</h2>`
-                : html `<h3 class="card-title">${i.header}</h3>`}
-										${i.body ? html `<div class="card-text">${unsafeHTML(i.body)}</div>` : null}
-										${!isLastRow && i.url
-                ? html `<div class="card-actions">
-													<uui-button look="outline" href=${i.url} target="_blank">
-														${i.buttonText || 'Open'}
-													</uui-button>
-												</div>`
-                : nothing}
-									</div>
-								`;
-            // LAST ROW: whole card is a link
-            return isLastRow
-                ? i.url
-                    ? html `
-												<a class="card normal-priority" role="listitem" href=${i.url} target="_blank" rel="noopener">
-													${content}
-												</a>
-											`
-                    : html ` <article class="card normal-priority" role="listitem">${content}</article> `
-                : html ` <article class="card" role="listitem">${content}</article> `;
-        })}
-					</div>
-				`)}
-		`;
+        return html ` <umb-news-container .items=${this._items}></umb-news-container> `;
     }
     #renderDefaultContent() {
         const infoLinks = [
@@ -192,101 +130,12 @@ let UmbUmbracoNewsDashboardElement = class UmbUmbracoNewsDashboardElement extend
 				margin-top: 0;
 				margin-bottom: 0;
 			}
-
-			/* Grid */
-			.cards {
-				--cols: 4;
-				--gap: var(--uui-size-space-4);
-				width: 100%;
-				display: grid;
-				grid-template-columns: repeat(
-					auto-fit,
-					minmax(calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), 1fr)
-				);
-				gap: var(--gap);
-			}
-
-			.cards + .cards {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			@container (max-width: 1200px) {
-				.cards {
-					grid-template-columns: repeat(auto-fit, minmax(2, 1fr));
-				}
-			}
-			@container (max-width: 700px) {
-				.cards {
-					grid-template-columns: 1fr;
-				}
-			}
-
-			/* Card */
-			.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%;
-			}
-
-			.card-img {
-				width: 100%;
-				object-fit: cover;
-				display: block;
-			}
-
-			.card-img.placeholder {
-				height: 8px;
-			}
-
-			.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-title {
-				margin: 0;
-			}
-
-			.card-text > p {
-				margin: 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 {
-					gap: 0;
-				}
-			}
-
-			.card-actions {
-				align-self: end;
-			}
 		`,
     ]; }
 };
 __decorate([
     state()
 ], UmbUmbracoNewsDashboardElement.prototype, "_items", void 0);
-__decorate([
-    state()
-], UmbUmbracoNewsDashboardElement.prototype, "_groupedItems", void 0);
 __decorate([
     state()
 ], UmbUmbracoNewsDashboardElement.prototype, "_loaded", void 0);

package/dist-cms/packages/user/current-user/components/mfa-provider-default.element.js

@@ -70,8 +70,8 @@ let UmbMfaProviderDefaultElement = class UmbMfaProviderDefaultElement extends Um
 									<img
 										id="qrCode"
 										.src=${this._qrCodeSetupImageUrl}
-										alt=${this.localize.term('user_2faQrCodeAlt')}
-										title=${this.localize.term('user_2faQrCodeTitle')}
+										alt=${this.localize.term('user_2faQrCodeAlt', this.displayName)}
+										title=${this.localize.term('user_2faQrCodeTitle', this.displayName)}
 										loading="eager" />
 								</div>
 								<uui-form-layout-item class="text-center">

package/dist-cms/packages/user/user/collection/item/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

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

@@ -0,0 +1,10 @@
+import { UMB_USER_ENTITY_TYPE } from '../../entity.js';
+export const manifests = [
+    {
+        type: 'entityCollectionItemCard',
+        alias: 'Umb.EntityCollectionItemCard.User',
+        name: 'User Entity Collection Item Card',
+        element: () => import('./user-collection-item-card.element.js'),
+        forEntityTypes: [UMB_USER_ENTITY_TYPE],
+    },
+];