@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/documents/documents/recycle-bin/tree/tree-item-children/collection/views/manifests.js

@@ -9,7 +9,7 @@ export const manifests = [
         weight: 300,
         meta: {
             label: 'Table',
-            icon: 'icon-list',
+            icon: 'icon-table',
             pathName: 'table',
         },
         conditions: [

package/dist-cms/packages/documents/documents/repository/manifests.js

@@ -1,2 +1,3 @@
 import { manifests as detailManifests } from './detail/manifests.js';
-export const manifests = [...detailManifests];
+import { manifests as validationManifests } from './validation/manifests.js';
+export const manifests = [...detailManifests, ...validationManifests];

package/dist-cms/packages/documents/documents/repository/preview/document-preview.repository.d.ts

@@ -1,6 +1,7 @@
 import { UmbRepositoryBase } from '../../../../core/repository/index.js';
 import type { DocumentUrlInfoModel } from '../../../../core/backend-api/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+/** @deprecated This has been deprecated, please use `UmbPreviewRepository` instead. To be removed in Umbraco 19. [LK] */
 export declare class UmbDocumentPreviewRepository extends UmbRepositoryBase {
     constructor(host: UmbControllerHost);
     /**

package/dist-cms/packages/documents/documents/repository/preview/document-preview.repository.js

@@ -2,6 +2,7 @@ import { tryExecute } from '../../../../core/resources/index.js';
 import { DocumentService, PreviewService } from '../../../../core/backend-api/index.js';
 import { UmbDeprecation } from '../../../../core/utils/index.js';
 import { UmbRepositoryBase } from '../../../../core/repository/index.js';
+/** @deprecated This has been deprecated, please use `UmbPreviewRepository` instead. To be removed in Umbraco 19. [LK] */
 export class UmbDocumentPreviewRepository extends UmbRepositoryBase {
     constructor(host) {
         super(host);
@@ -15,6 +16,11 @@ export class UmbDocumentPreviewRepository extends UmbRepositoryBase {
      * @returns {DocumentUrlInfoModel} The preview URLs of the document.
      */
     async getPreviewUrl(unique, providerAlias, culture, segment) {
+        new UmbDeprecation({
+            removeInVersion: '19.0.0',
+            deprecated: '`UmbDocumentPreviewRepository.getPreviewUrl()`',
+            solution: 'Use `UmbPreviewRepository.getPreviewUrl()` instead',
+        }).warn();
         const { data, error } = await tryExecute(this, DocumentService.getDocumentByIdPreviewUrl({
             path: { id: unique },
             query: { providerAlias, culture, segment },
@@ -45,6 +51,11 @@ export class UmbDocumentPreviewRepository extends UmbRepositoryBase {
      * @memberof UmbDocumentPreviewRepository
      */
     async exit() {
+        new UmbDeprecation({
+            removeInVersion: '19.0.0',
+            deprecated: '`UmbDocumentPreviewRepository.exit()`',
+            solution: 'Use `UmbPreviewRepository.exit()` instead',
+        }).warn();
         await tryExecute(this, PreviewService.deletePreview(), { disableNotifications: true });
         return;
     }

package/dist-cms/packages/documents/documents/search/document-search.server.data-source.js

@@ -43,7 +43,7 @@ export class UmbDocumentSearchServerDataSource {
                     },
                     entityType: UMB_DOCUMENT_ENTITY_TYPE,
                     hasChildren: item.hasChildren,
-                    href: '/section/content/workspace/document/edit/' + item.id,
+                    href: 'section/content/workspace/document/edit/' + item.id,
                     isProtected: item.isProtected,
                     isTrashed: item.isTrashed,
                     name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.

package/dist-cms/packages/documents/documents/user-permissions/document/conditions/index.d.ts

@@ -0,0 +1 @@
+export { UmbDocumentUserPermissionCondition } from './document-user-permission.condition.js';

package/dist-cms/packages/documents/documents/user-permissions/document/conditions/index.js

@@ -0,0 +1 @@
+export { UmbDocumentUserPermissionCondition } from './document-user-permission.condition.js';

package/dist-cms/packages/documents/documents/user-permissions/document/index.d.ts

@@ -1 +1,2 @@
+export * from './conditions/index.js';
 export * from './repository/index.js';

package/dist-cms/packages/documents/documents/user-permissions/document/index.js

@@ -1 +1,2 @@
+export * from './conditions/index.js';
 export * from './repository/index.js';

package/dist-cms/packages/documents/documents/user-permissions/document/manifests.js

@@ -43,7 +43,7 @@ const permissions = [
         forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
         meta: {
             verbs: ['Umb.Document.Create'],
-            label: '#actions_create',
+            label: '#actions_createFor',
             description: '#actionDescriptions_create',
         },
     },

package/dist-cms/packages/documents/documents/workspace/document-workspace.context.js

@@ -2,7 +2,6 @@ import { UmbDocumentTypeDetailRepository } from '../../document-types/repository
 import { UmbDocumentPropertyDatasetContext } from '../property-dataset-context/document-property-dataset.context.js';
 import { UMB_DOCUMENT_DETAIL_REPOSITORY_ALIAS, UmbDocumentSegmentRepository } from '../repository/index.js';
 import { UMB_CREATE_DOCUMENT_WORKSPACE_PATH_PATTERN, UMB_CREATE_FROM_BLUEPRINT_DOCUMENT_WORKSPACE_PATH_PATTERN, UMB_DOCUMENT_COLLECTION_ALIAS, UMB_DOCUMENT_ENTITY_TYPE, UMB_DOCUMENT_SAVE_MODAL, UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS, UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN, UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_UPDATE, } from '../constants.js';
-import { UmbDocumentPreviewRepository } from '../repository/preview/index.js';
 import { UmbDocumentValidationRepository } from '../repository/validation/index.js';
 import { UMB_DOCUMENT_CONFIGURATION_CONTEXT } from '../index.js';
 import { UMB_DOCUMENT_DETAIL_MODEL_VARIANT_SCAFFOLD, UMB_DOCUMENT_WORKSPACE_ALIAS } from './constants.js';
@@ -17,11 +16,14 @@ import { UmbVariantId } from '../../../core/variant/index.js';
 import { UmbWorkspaceIsNewRedirectController, UmbWorkspaceIsNewRedirectControllerAlias, } from '../../../core/workspace/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../core/action/index.js';
 import { UmbLocalizationController } from '../../../../libs/localization-api/index.js';
+import { UmbPreviewRepository } from '../../../preview/index.js';
 export class UmbDocumentWorkspaceContext extends UmbContentDetailWorkspaceContextBase {
     #isTrashedContext;
     #documentSegmentRepository;
     #actionEventContext;
     #localize;
+    #previewWindow;
+    #previewWindowDocumentId;
     constructor(host) {
         super(host, {
             entityType: UMB_DOCUMENT_ENTITY_TYPE,
@@ -47,6 +49,8 @@ export class UmbDocumentWorkspaceContext extends UmbContentDetailWorkspaceContex
         this.#isTrashedContext = new UmbIsTrashedEntityContext(this);
         this.#documentSegmentRepository = new UmbDocumentSegmentRepository(this);
         this.#localize = new UmbLocalizationController(this);
+        this.#previewWindow = null;
+        this.#previewWindowDocumentId = null;
         this.#onRecycleBinEvent = (event) => {
             const unique = this.getUnique();
             const entityType = this.getEntityType();
@@ -240,15 +244,36 @@ export class UmbDocumentWorkspaceContext extends UmbContentDetailWorkspaceContex
             firstVariantId = UmbVariantId.FromString(selected[0]);
             const variantIds = [firstVariantId];
             const saveData = await this._data.constructData(variantIds);
-            await this.runMandatoryValidationForSaveData(saveData);
+            // Run mandatory validation (checks for name, etc.)
+            await this.runMandatoryValidationForSaveData(saveData, variantIds);
+            // Ask server to validate and show validation tooltips (like the Save action does)
+            await this.askServerToValidate(saveData, variantIds);
+            // Perform save
             await this.performCreateOrUpdate(variantIds, saveData);
         }
-        // Get the preview URL from the server.
-        const previewRepository = new UmbDocumentPreviewRepository(this);
+        // Check if preview window is still open and showing the same document
+        // If so, just focus it and let SignalR handle the refresh
+        try {
+            if (this.#previewWindow && !this.#previewWindow.closed && this.#previewWindowDocumentId === unique) {
+                this.#previewWindow.focus();
+                return;
+            }
+        }
+        catch {
+            // Window reference is stale, continue to create new preview session
+            this.#previewWindow = null;
+            this.#previewWindowDocumentId = null;
+        }
+        // Preview not open, create new preview session and open window
+        const previewRepository = new UmbPreviewRepository(this);
         const previewUrlData = await previewRepository.getPreviewUrl(unique, urlProviderAlias, firstVariantId.culture ?? undefined, firstVariantId.segment ?? undefined);
         if (previewUrlData.url) {
-            const previewWindow = window.open(previewUrlData.url, `umbpreview-${unique}`);
-            previewWindow?.focus();
+            // Add cache-busting parameter to ensure the preview tab reloads with the new preview session
+            const previewUrl = new URL(previewUrlData.url, window.document.baseURI);
+            previewUrl.searchParams.set('rnd', Date.now().toString());
+            this.#previewWindow = window.open(previewUrl.toString(), `umbpreview-${unique}`);
+            this.#previewWindowDocumentId = unique;
+            this.#previewWindow?.focus();
             return;
         }
         if (previewUrlData.message) {

package/dist-cms/packages/extension-insights/collection/views/manifests.js

@@ -8,7 +8,7 @@ export const manifests = [
         element: () => import('./table/extension-table-collection-view.element.js'),
         meta: {
             label: 'Table',
-            icon: 'icon-list',
+            icon: 'icon-table',
             pathName: 'table',
         },
         conditions: [

package/dist-cms/packages/extension-types/index.d.ts

@@ -78,9 +78,11 @@ import '../templating/partial-views/index.js';
 import '../core/picker-input/index.js';
 import '../core/picker-data-source/index.js';
 import '../core/picker/index.js';
+import '../preview/index.js';
 import '../core/property-action/index.js';
 import '../core/property-editor-data-source/index.js';
 import '../core/property-editor/index.js';
+import '../core/property-sort-mode/index.js';
 import '../content/property-type/index.js';
 import '../core/property/index.js';
 import '../core/recycle-bin/index.js';

package/dist-cms/packages/language/app-language-select/app-language-select.element.js

@@ -193,6 +193,7 @@ let UmbAppLanguageSelectElement = class UmbAppLanguageSelectElement extends UmbL
 				justify-content: space-between;
 				cursor: pointer;
 				font-family: inherit;
+				box-sizing: border-box;
 			}
 
 			#toggle:hover {

package/dist-cms/packages/language/collection/views/manifests.js

@@ -8,7 +8,7 @@ export const manifests = [
         js: () => import('./table/language-table-collection-view.element.js'),
         meta: {
             label: 'Table',
-            icon: 'icon-list',
+            icon: 'icon-table',
             pathName: 'table',
         },
         conditions: [

package/dist-cms/packages/language/collection/views/table/language-table-collection-view.element.js

@@ -49,12 +49,19 @@ let UmbLanguageTableCollectionViewElement = class UmbLanguageTableCollectionView
         this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
             this.#collectionContext = instance;
             this.#observeCollectionItems();
+            this.#observeIsSelectable();
         });
     }
     #observeCollectionItems() {
-        if (!this.#collectionContext)
-            return;
-        this.observe(this.#collectionContext.items, (items) => this.#createTableItems(items), 'umbCollectionItemsObserver');
+        this.observe(this.#collectionContext?.items, (items) => this.#createTableItems(items || []), 'umbCollectionItemsObserver');
+    }
+    #observeIsSelectable() {
+        this.observe(this.#collectionContext?.selection.selectable, (isSelectable) => {
+            this._tableConfig = {
+                ...this._tableConfig,
+                allowSelection: isSelectable ?? false,
+            };
+        }, 'umbCollectionIsSelectableObserver');
     }
     #createTableItems(languages) {
         this._tableItems = languages.map((language) => {

package/dist-cms/packages/language/components/input-language/input-language.element.d.ts

@@ -47,6 +47,7 @@ export declare class UmbInputLanguageElement extends UmbInputLanguageElement_bas
     get readonly(): boolean;
     set readonly(value: boolean);
     private _items;
+    private _statuses?;
     constructor();
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/language/components/input-language/input-language.element.js

@@ -80,7 +80,7 @@ let UmbInputLanguageElement = class UmbInputLanguageElement extends UUIFormContr
                 return modelEntry;
             },
             identifier: 'Umb.SorterIdentifier.InputLanguage',
-            itemSelector: 'uui-ref-node',
+            itemSelector: 'umb-entity-item-ref',
             containerSelector: 'uui-ref-list',
             onChange: ({ model }) => {
                 this.selection = model;
@@ -109,6 +109,7 @@ let UmbInputLanguageElement = class UmbInputLanguageElement extends UUIFormContr
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.#pickerContext.getSelection().length > this.max);
         this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
         this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observerItems');
+        this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses), '_observeStatuses');
     }
     getFormElement() {
         return undefined;
@@ -119,8 +120,8 @@ let UmbInputLanguageElement = class UmbInputLanguageElement extends UUIFormContr
             multiple: this.max > 1 ? true : false,
         });
     }
-    #onRemove(item) {
-        this.#pickerContext.requestRemoveItem(item.unique);
+    #onRemove(unique) {
+        this.#pickerContext.requestRemoveItem(unique);
     }
     render() {
         return html `${this.#renderItems()} ${this.#renderAddButton()}`;
@@ -137,23 +138,33 @@ let UmbInputLanguageElement = class UmbInputLanguageElement extends UUIFormContr
 		`;
     }
     #renderItems() {
-        if (!this._items)
+        if (!this._statuses)
             return;
         return html `
 			<uui-ref-list>
-				${repeat(this._items, (item) => item.unique, (item) => html `<umb-entity-item-ref
-							id=${item.unique}
-							.item=${item}
-							?readonly=${this.readonly}
-							?standalone=${this.max === 1}>
-							${when(!this.readonly, () => html `
-									<uui-action-bar slot="actions">
-										<uui-button
-											label=${this.localize.term('general_remove')}
-											@click=${() => this.#onRemove(item)}></uui-button>
-									</uui-action-bar>
-								`)}
-						</umb-entity-item-ref>`)}
+				${repeat(this._statuses, (status) => status.unique, (status) => {
+            const unique = status.unique;
+            const item = this._items?.find((x) => x.unique === unique);
+            const isError = status.state.type === 'error';
+            return html `
+							<umb-entity-item-ref
+								id=${unique}
+								.item=${item}
+								?error=${isError}
+								.errorMessage=${status.state.error}
+								.errorDetail=${isError ? unique : undefined}
+								?readonly=${this.readonly}
+								?standalone=${this.max === 1}>
+								${when(!this.readonly, () => html `
+										<uui-action-bar slot="actions">
+											<uui-button
+												label=${this.localize.term('general_remove')}
+												@click=${() => this.#onRemove(unique)}></uui-button>
+										</uui-action-bar>
+									`)}
+							</umb-entity-item-ref>
+						`;
+        })}
 			</uui-ref-list>
 		`;
     }
@@ -192,6 +203,9 @@ __decorate([
 __decorate([
     state()
 ], UmbInputLanguageElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbInputLanguageElement.prototype, "_statuses", void 0);
 UmbInputLanguageElement = __decorate([
     customElement('umb-input-language')
 ], UmbInputLanguageElement);

package/dist-cms/packages/language/entity-actions/manifests.js

@@ -22,7 +22,7 @@ export const manifests = [
         forEntityTypes: [UMB_LANGUAGE_ROOT_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/log-viewer/components/donut-chart/donut-chart.element.d.ts

@@ -1,12 +1,17 @@
-import { LitElement } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
 /**
  * This is a donut chart component that can be used to display data in a circular way.
  * @class UmbDonutChartElement
  * @augments {LitElement}
  */
-export declare class UmbDonutChartElement extends LitElement {
+export declare class UmbDonutChartElement extends UmbLitElement {
     #private;
     static percentToDegrees(percent: number): number;
+    /**
+     * Minimum visual percentage for rendering a slice.
+     * Slices below this percentage will be visually expanded to this size to remain visible.
+     */
+    static MIN_SLICE_PERCENT: number;
     /**
      * Circle radius in pixels
      * @memberof UmbDonutChartElement
@@ -32,6 +37,11 @@ export declare class UmbDonutChartElement extends LitElement {
      * @memberof UmbDonutChartElement
      */
     hideDetailBox: boolean;
+    /**
+     * Shows the description text below the chart
+     * @memberof UmbDonutChartElement
+     */
+    showDescription: boolean;
     private _slices;
     private _container;
     private _detailsBox;

package/dist-cms/packages/log-viewer/components/donut-chart/donut-chart.element.js

@@ -7,15 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var _a;
 var UmbDonutChartElement_1;
 import { UmbTextStyles } from '../../../core/style/index.js';
-import { css, html, LitElement, svg, customElement, property, query, queryAssignedElements, state, } from '../../../../external/lit/index.js';
+import { css, html, svg, customElement, property, query, queryAssignedElements, state, } from '../../../../external/lit/index.js';
 import { clamp } from '../../../core/utils/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
 //TODO: maybe move to UI Library
 /**
  * This is a donut chart component that can be used to display data in a circular way.
  * @class UmbDonutChartElement
  * @augments {LitElement}
  */
-let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
+let UmbDonutChartElement = class UmbDonutChartElement extends UmbLitElement {
     constructor() {
         super(...arguments);
         /**
@@ -43,26 +44,38 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
          * @memberof UmbDonutChartElement
          */
         this.hideDetailBox = false;
+        /**
+         * Shows the description text below the chart
+         * @memberof UmbDonutChartElement
+         */
+        this.showDescription = false;
         this._circles = [];
         this._viewBox = 100;
         this._posY = 0;
         this._posX = 0;
         this._detailName = '';
-        this._detailAmount = 0;
+        this._detailAmount = '0';
         this._detailColor = 'black';
         this._totalAmount = 0;
         this._detailKind = '';
         this.#calculateDetailsBoxPosition = (event) => {
+            // Recalculate bounds on each mouse move to handle window resize
+            this.#containerBounds = this._container.getBoundingClientRect();
             const x = this.#containerBounds ? event.clientX - this.#containerBounds?.left : 0;
             const y = this.#containerBounds ? event.clientY - this.#containerBounds?.top : 0;
-            this._posX = x - 10;
-            this._posY = y - 70;
+            this._posX = x + 10;
+            this._posY = y + 10;
         };
     }
     static { UmbDonutChartElement_1 = this; }
     static percentToDegrees(percent) {
         return percent * 3.6;
     }
+    /**
+     * Minimum visual percentage for rendering a slice.
+     * Slices below this percentage will be visually expanded to this size to remain visible.
+     */
+    static { this.MIN_SLICE_PERCENT = 5; }
     #containerBounds;
     firstUpdated() {
         this.#containerBounds = this._container.getBoundingClientRect();
@@ -78,21 +91,43 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
     #calculatePercentage(partialValue) {
         if (this._totalAmount === 0)
             return 0;
-        const percent = Math.round((100 * partialValue) / this._totalAmount);
+        const percent = (100 * partialValue) / this._totalAmount;
         return clamp(percent, 0, 99);
     }
     #printCircles(event = null) {
         this._totalAmount = this._slices.reduce((acc, slice) => acc + slice.amount, 0);
         event?.stopPropagation();
-        this._circles = this.#addCommands(this._slices.map((slice) => {
+        // First pass: calculate actual percentages
+        const circles = this._slices.map((slice) => {
+            const percent = this.#calculatePercentage(slice.amount);
             return {
-                percent: this.#calculatePercentage(slice.amount),
+                percent,
+                visualPercent: percent,
                 number: slice.amount,
                 color: slice.color,
                 name: slice.name,
                 kind: slice.kind,
+                href: slice.href,
             };
-        }));
+        });
+        // Second pass: apply minimum visual percentage and normalize to 100%
+        const totalActualPercent = circles.reduce((acc, c) => acc + c.percent, 0);
+        if (totalActualPercent > 0) {
+            const smallSlices = circles.filter((c) => c.percent > 0 && c.percent < UmbDonutChartElement_1.MIN_SLICE_PERCENT);
+            // Expand small slices to minimum
+            smallSlices.forEach((c) => {
+                c.visualPercent = UmbDonutChartElement_1.MIN_SLICE_PERCENT;
+            });
+            // Calculate total and normalize to 100%
+            const totalVisualPercent = circles.reduce((acc, c) => acc + c.visualPercent, 0);
+            if (totalVisualPercent > 0 && totalVisualPercent !== 100) {
+                const scale = 100 / totalVisualPercent;
+                circles.forEach((c) => {
+                    c.visualPercent = c.visualPercent * scale;
+                });
+            }
+        }
+        this._circles = this.#addCommands(circles);
     }
     #addCommands(Circles) {
         let previousPercent = 0;
@@ -102,12 +137,12 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
                 commands: this.#getSliceCommands(slice, this.radius, this.svgSize, this.borderSize),
                 offset: previousPercent * 3.6 * -1,
             };
-            previousPercent += slice.percent;
+            previousPercent += slice.visualPercent;
             return sliceWithCommands;
         });
     }
     #getSliceCommands(Circle, radius, svgSize, borderSize) {
-        const degrees = UmbDonutChartElement_1.percentToDegrees(Circle.percent);
+        const degrees = UmbDonutChartElement_1.percentToDegrees(Circle.visualPercent);
         const longPathFlag = degrees > 180 ? 1 : 0;
         const innerRadius = radius - borderSize;
         const commands = [];
@@ -130,7 +165,7 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
         const index = target.dataset.index;
         const circle = this._circles[index];
         this._detailName = circle.name;
-        this._detailAmount = circle.number;
+        this._detailAmount = this.localize.number(circle.number);
         this._detailColor = circle.color;
         this._detailKind = circle.kind;
     }
@@ -168,10 +203,10 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
 					<feDropShadow stdDeviation="1 1" in="merge1" dx="0" dy="0" flood-color="#000" flood-opacity="0.8" x="0%" y="0%" width="100%" height="100%" result="dropShadow1"/>
 				</filter>
 				<desc>${this.description}</desc>
-					${this._circles.map((circle, i) => svg `
+					${this._circles.map((circle, i) => {
+            const content = svg `
 								<path
 								class="circle"
-
 								data-index="${i}"
 									fill="${circle.color}"
 									role="listitem"
@@ -187,13 +222,19 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
 									role="listitem"
 									d="${circle.commands}"
 									transform="rotate(${circle.offset} ${this._viewBox / 2} ${this._viewBox / 2})">
-								</path>`)}
+								</path>`;
+            return circle.href
+                ? svg `<a href="${circle.href}" aria-label=${this.localize.term('logViewer_viewLogsLabel', circle.name)}>${content}</a>`
+                : content;
+        })}
 
         `;
     }
     render() {
         return html ` <div id="container" @mousemove=${this.#calculateDetailsBoxPosition}>
-				<svg viewBox="0 0 ${this._viewBox} ${this._viewBox}" role="list">${this.#renderCircles()}</svg>
+				<svg width="100%" height="100%" viewBox="0 0 ${this._viewBox} ${this._viewBox}" role="list">
+					${this.#renderCircles()}
+				</svg>
 				<div
 					id="details-box"
 					style="--pos-y: ${this._posY}px; --pos-x: ${this._posX}px; --umb-donut-detail-color: ${this._detailColor}">
@@ -201,6 +242,7 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
 					<span>${this._detailAmount} ${this._detailKind}</span>
 				</div>
 			</div>
+			${this.showDescription && this.description ? html `<p class="description">${this.description}</p>` : ''}
 			<slot @slotchange=${this.#printCircles} @slice-update=${this.#printCircles}></slot>`;
     }
     static { this.styles = [
@@ -225,7 +267,9 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
 
 			#container {
 				position: relative;
-				width: 200px;
+				width: 100%;
+				max-width: 200px;
+				aspect-ratio: 1;
 			}
 
 			#details-box {
@@ -244,6 +288,7 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
 				transform: translate3d(var(--pos-x), var(--pos-y), 0);
 				transition: transform 0.2s cubic-bezier(0.02, 1.23, 0.79, 1.08);
 				transition: opacity 150ms linear;
+				pointer-events: none;
 			}
 
 			#details-box.show {
@@ -261,6 +306,17 @@ let UmbDonutChartElement = class UmbDonutChartElement extends LitElement {
 				display: flex;
 				align-items: center;
 			}
+
+			.slice-number {
+				user-select: none;
+			}
+
+			.description {
+				text-align: center;
+				font-size: var(--uui-type-small-size);
+				color: var(--uui-color-text-alt);
+				margin: var(--uui-size-space-2) 0 0 0;
+			}
 		`,
     ]; }
 };
@@ -279,6 +335,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UmbDonutChartElement.prototype, "hideDetailBox", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-description' })
+], UmbDonutChartElement.prototype, "showDescription", void 0);
 __decorate([
     queryAssignedElements({ selector: 'umb-donut-slice' })
 ], UmbDonutChartElement.prototype, "_slices", void 0);

package/dist-cms/packages/log-viewer/components/donut-chart/donut-slice.element.d.ts

@@ -26,6 +26,11 @@ export declare class UmbDonutSliceElement extends LitElement {
      * @memberof UmbDonutSliceElement
      */
     kind: string;
+    /**
+     * Optional href to make the slice clickable
+     * @memberof UmbDonutSliceElement
+     */
+    href: string;
     willUpdate(): void;
 }
 declare global {

package/dist-cms/packages/log-viewer/components/donut-chart/donut-slice.element.js

@@ -34,6 +34,11 @@ let UmbDonutSliceElement = class UmbDonutSliceElement extends LitElement {
          * @memberof UmbDonutSliceElement
          */
         this.kind = '';
+        /**
+         * Optional href to make the slice clickable
+         * @memberof UmbDonutSliceElement
+         */
+        this.href = '';
     }
     willUpdate() {
         this.dispatchEvent(new CustomEvent('slice-update', { composed: true, bubbles: true }));
@@ -51,6 +56,9 @@ __decorate([
 __decorate([
     property()
 ], UmbDonutSliceElement.prototype, "kind", void 0);
+__decorate([
+    property()
+], UmbDonutSliceElement.prototype, "href", void 0);
 UmbDonutSliceElement = __decorate([
     customElement('umb-donut-slice')
 ], UmbDonutSliceElement);

package/dist-cms/packages/log-viewer/components/log-viewer-date-range-selector.element.d.ts

@@ -4,7 +4,8 @@ export declare class UmbLogViewerDateRangeSelectorElement extends UmbLitElement
     private _startDate;
     private _endDate;
     horizontal: boolean;
-    constructor();
+    private set _logViewerContext(value);
+    private get _logViewerContext();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }