@umbraco-cms/backoffice 16.0.0 → 16.1.0

package/dist-cms/packages/media/media/property-editors/image-crops/property-editor-ui-image-crops.element.js

@@ -10,23 +10,16 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { generateAlias } from '@umbraco-cms/backoffice/utils';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-/**
- * @element umb-property-editor-ui-image-crops
- */
 let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsElement extends UmbLitElement {
     constructor() {
         super(...arguments);
         this._value = [];
+        this._isCreating = false;
         this.editCropAlias = '';
         this.#oldInputValue = '';
         this.#sorter = new UmbSorterController(this, {
-            getUniqueOfElement: (element) => {
-                const unique = element.dataset['alias'];
-                return unique;
-            },
-            getUniqueOfModel: (modelEntry) => {
-                return modelEntry.alias;
-            },
+            getUniqueOfElement: (element) => element.dataset['alias'],
+            getUniqueOfModel: (modelEntry) => modelEntry.alias,
             identifier: 'Umb.SorterIdentifier.ImageCrops',
             itemSelector: '.crop',
             containerSelector: '.crops',
@@ -53,29 +46,16 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
     }
     #onEdit(crop) {
         this.editCropAlias = crop.alias;
-        const form = this.shadowRoot?.querySelector('form');
-        if (!form)
-            return;
-        const label = form.querySelector('#label');
-        const alias = form.querySelector('#alias');
-        const width = form.querySelector('#width');
-        const height = form.querySelector('#height');
-        if (!alias || !width || !height)
-            return;
-        label.value = crop.label;
-        alias.value = crop.alias;
-        width.value = crop.width.toString();
-        height.value = crop.height.toString();
+        this._isCreating = false;
     }
     #onEditCancel() {
         this.editCropAlias = '';
+        this._isCreating = false;
     }
     #onSubmit(event) {
         event.preventDefault();
         const form = event.target;
-        if (!form)
-            return;
-        if (!form.checkValidity())
+        if (!form || !form.checkValidity())
             return;
         const formData = new FormData(form);
         const label = formData.get('label');
@@ -84,8 +64,6 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
         const height = formData.get('height');
         if (!label || !alias || !width || !height)
             return;
-        if (!this.value)
-            this.value = [];
         const newCrop = {
             label,
             alias,
@@ -106,29 +84,10 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
         }
         this.dispatchEvent(new UmbChangeEvent());
         form.reset();
-        this._labelInput.focus();
-    }
-    #renderActions() {
-        return this.editCropAlias
-            ? html `<uui-button @click=${this.#onEditCancel}>Cancel</uui-button>
-					<uui-button look="secondary" type="submit" label="Save"></uui-button>`
-            : html `<uui-button look="secondary" type="submit" label="Add"></uui-button>`;
+        this._labelInput?.focus();
+        this._isCreating = false;
     }
-    #onLabelInput() {
-        const value = this._labelInput.value ?? '';
-        const aliasValue = generateAlias(value);
-        const alias = this.shadowRoot?.querySelector('#alias');
-        if (!alias)
-            return;
-        const oldAliasValue = generateAlias(this.#oldInputValue);
-        if (alias.value === oldAliasValue || !alias.value) {
-            alias.value = aliasValue;
-        }
-        this.#oldInputValue = value;
-    }
-    render() {
-        if (!this.value)
-            this.value = [];
+    #renderForm(initial) {
         return html `
 			<uui-form>
 				<form @submit=${this.#onSubmit}>
@@ -140,47 +99,109 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 							id="label"
 							name="label"
 							type="text"
-							autocomplete="false"
-							value=""></uui-input>
+							required
+							.value=${initial?.label ?? ''}></uui-input>
 					</div>
 					<div class="input">
 						<uui-label for="alias">Alias</uui-label>
-						<uui-input label="Alias" id="alias" name="alias" type="text" autocomplete="false" value=""></uui-input>
+						<uui-input
+							label="Alias"
+							id="alias"
+							name="alias"
+							type="text"
+							autocomplete="false"
+							required
+							.value=${initial?.alias ?? ''}></uui-input>
 					</div>
 					<div class="input">
 						<uui-label for="width">Width</uui-label>
-						<uui-input label="Width" id="width" name="width" type="number" autocomplete="false" value="" min="0">
+						<uui-input
+							label="Width"
+							id="width"
+							name="width"
+							type="number"
+							autocomplete="false"
+							required
+							.value=${initial?.width ?? ''}
+							min="0">
 							<span class="append" slot="append">px</span>
 						</uui-input>
 					</div>
 					<div class="input">
 						<uui-label for="height">Height</uui-label>
-						<uui-input label="Height" id="height" name="height" type="number" autocomplete="false" value="" min="0">
+						<uui-input
+							label="Height"
+							id="height"
+							name="height"
+							type="number"
+							autocomplete="false"
+							required
+							.value=${initial?.height ?? ''}
+							min="0">
 							<span class="append" slot="append">px</span>
 						</uui-input>
 					</div>
-					<div class="action-wrapper">${this.#renderActions()}</div>
+					<div class="action-wrapper">
+						${this.editCropAlias
+            ? html `<uui-button @click=${this.#onEditCancel}>Cancel</uui-button>
+									<uui-button look="secondary" type="submit" label=${this.localize.term('general_edit')}></uui-button>`
+            : html `<uui-button
+									look="secondary"
+									type="submit"
+									label=${this.localize.term('general_create')}></uui-button>`}
+					</div>
 				</form>
 			</uui-form>
-			<div class="crops">
+		`;
+    }
+    #onLabelInput() {
+        const value = this._labelInput.value ?? '';
+        const aliasValue = generateAlias(value);
+        const alias = this.shadowRoot?.querySelector('#alias');
+        if (!alias)
+            return;
+        const oldAliasValue = generateAlias(this.#oldInputValue);
+        if (alias.value === oldAliasValue || !alias.value) {
+            alias.value = aliasValue;
+        }
+        this.#oldInputValue = value;
+    }
+    render() {
+        return html `
+			<uui-ref-list class="crops">
 				${repeat(this.value, (item) => item.alias, (item) => html `
-						<div class="crop" data-alias="${item.alias}">
-							<uui-icon name="icon-grip" class="crop-drag"></uui-icon>
-							<span><strong>${item.label}</strong> <em>(${item.alias})</em></span>
-							<span class="crop-size">(${item.width} x ${item.height}px)</span>
-							<div class="crop-actions">
-								<uui-button
-									label=${this.localize.term('general_edit')}
-									color="default"
-									@click=${() => this.#onEdit(item)}></uui-button>
-								<uui-button
-									label=${this.localize.term('general_remove')}
-									color="danger"
-									@click=${() => this.#onRemove(item.alias)}></uui-button>
-							</div>
-						</div>
+						${this.editCropAlias === item.alias
+            ? html `<div class="crop-form">${this.#renderForm(item)}</div>`
+            : html `
+									<uui-ref-node
+										class="crop"
+										data-alias="${item.alias}"
+										detail="${item.width} x ${item.height}px"
+										name="${item.label} (${item.alias})">
+										<uui-icon slot="icon" name="icon-crop"></uui-icon>
+										<uui-action-bar slot="actions">
+											<uui-button
+												label=${this.localize.term('general_edit')}
+												data-mark="action:crop-edit"
+												@click=${() => this.#onEdit(item)}></uui-button>
+											<uui-button
+												label=${this.localize.term('general_remove')}
+												data-mark="action:crop-remove"
+												@click=${() => this.#onRemove(item.alias)}></uui-button>
+										</uui-action-bar>
+									</uui-ref-node>
+								`}
 					`)}
-			</div>
+			</uui-ref-list>
+			${!this._isCreating && !this.editCropAlias
+            ? html `<uui-button
+						id="create"
+						data-mark="action:crop-create"
+						look="placeholder"
+						@click=${() => (this._isCreating = true)}
+						label=${this.localize.term('general_create')}></uui-button>`
+            : ''}
+			${this._isCreating ? this.#renderForm() : ''}
 		`;
     }
     static { this.styles = [
@@ -198,34 +219,16 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 			.crop {
 				display: flex;
 				align-items: center;
-				background: var(--uui-color-background);
-			}
-			.crop-drag {
-				cursor: grab;
-				padding-inline: var(--uui-size-space-4);
-				color: var(--uui-color-disabled-contrast);
-				font-weight: bold;
-			}
-
-			.crop-drag:active {
-				cursor: grabbing;
-			}
-
-			.crop-size {
-				font-size: 0.9em;
-				padding-inline: var(--uui-size-space-4);
-			}
-			.crop-actions {
-				display: flex;
-				margin-left: auto;
 			}
 			form {
 				display: flex;
 				gap: var(--uui-size-space-2);
+				flex-wrap: wrap;
 			}
 			.input {
 				display: flex;
 				flex-direction: column;
+				flex: 1 1 200px;
 			}
 			uui-input[type='number'] {
 				text-align: right;
@@ -243,6 +246,9 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 				display: flex;
 				align-items: flex-end;
 			}
+			#create {
+				width: 100%;
+			}
 		`,
     ]; }
 };
@@ -252,6 +258,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIImageCropsElement.prototype, "_value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIImageCropsElement.prototype, "_isCreating", void 0);
 __decorate([
     property({ type: Array })
 ], UmbPropertyEditorUIImageCropsElement.prototype, "value", null);

package/dist-cms/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.js

@@ -25,10 +25,13 @@ let UmbPropertyEditorUIUploadFieldElement = class UmbPropertyEditorUIUploadField
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
-        return html `<umb-input-upload-field
-			@change="${this.#onChange}"
-			.allowedFileExtensions="${this._fileExtensions}"
-			.value=${this.value}></umb-input-upload-field>`;
+        return html `
+			<umb-input-upload-field
+				.allowedFileExtensions=${this._fileExtensions}
+				.value=${this.value}
+				@change=${this.#onChange}>
+			</umb-input-upload-field>
+		`;
     }
 };
 __decorate([

package/dist-cms/packages/media/media/recycle-bin/repository/media-recycle-bin.server.data-source.d.ts

@@ -24,7 +24,7 @@ export declare class UmbMediaRecycleBinServerDataSource implements UmbRecycleBin
         } | null;
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/repository/detail/media-detail.server.data-source.d.ts

@@ -1,26 +1,20 @@
 import type { UmbMediaDetailModel } from '../../types.js';
 import type { UmbDetailDataSource } from '@umbraco-cms/backoffice/repository';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import { type UmbDeepPartialObject } from '@umbraco-cms/backoffice/utils';
 /**
  * A data source for the Media that fetches data from the server
  * @class UmbMediaServerDataSource
  * @implements {RepositoryDetailDataSource}
  */
-export declare class UmbMediaServerDataSource implements UmbDetailDataSource<UmbMediaDetailModel> {
-    #private;
-    /**
-     * Creates an instance of UmbMediaServerDataSource.
-     * @param {UmbControllerHost} host - The controller host for this controller to be appended to
-     * @memberof UmbMediaServerDataSource
-     */
-    constructor(host: UmbControllerHost);
+export declare class UmbMediaServerDataSource extends UmbControllerBase implements UmbDetailDataSource<UmbMediaDetailModel> {
     /**
      * Creates a new Media scaffold
-     * @param {Partial<UmbMediaDetailModel>} [preset]
+     * @param {UmbDeepPartialObject<UmbMediaDetailModel>} [preset]
      * @returns { UmbMediaDetailModel }
      * @memberof UmbMediaServerDataSource
      */
-    createScaffold(preset?: Partial<UmbMediaDetailModel>): Promise<{
+    createScaffold(preset?: UmbDeepPartialObject<UmbMediaDetailModel>): Promise<{
         data: UmbMediaDetailModel;
     }>;
     /**
@@ -30,7 +24,7 @@ export declare class UmbMediaServerDataSource implements UmbDetailDataSource<Umb
      * @memberof UmbMediaServerDataSource
      */
     read(unique: string): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbMediaDetailModel;
@@ -44,7 +38,7 @@ export declare class UmbMediaServerDataSource implements UmbDetailDataSource<Umb
      * @memberof UmbMediaServerDataSource
      */
     create(model: UmbMediaDetailModel, parentUnique?: string | null): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbMediaDetailModel;
@@ -58,7 +52,7 @@ export declare class UmbMediaServerDataSource implements UmbDetailDataSource<Umb
      * @memberof UmbMediaServerDataSource
      */
     update(model: UmbMediaDetailModel): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbMediaDetailModel;

package/dist-cms/packages/media/media/repository/detail/media-detail.server.data-source.js

@@ -2,35 +2,38 @@ import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { MediaService } from '@umbraco-cms/backoffice/external/backend-api';
 import { tryExecute } from '@umbraco-cms/backoffice/resources';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbMediaTypeDetailServerDataSource } from '@umbraco-cms/backoffice/media-type';
+import { umbDeepMerge } from '@umbraco-cms/backoffice/utils';
 /**
  * A data source for the Media that fetches data from the server
  * @class UmbMediaServerDataSource
  * @implements {RepositoryDetailDataSource}
  */
-export class UmbMediaServerDataSource {
-    #host;
-    /**
-     * Creates an instance of UmbMediaServerDataSource.
-     * @param {UmbControllerHost} host - The controller host for this controller to be appended to
-     * @memberof UmbMediaServerDataSource
-     */
-    constructor(host) {
-        this.#host = host;
-    }
+export class UmbMediaServerDataSource extends UmbControllerBase {
     /**
      * Creates a new Media scaffold
-     * @param {Partial<UmbMediaDetailModel>} [preset]
+     * @param {UmbDeepPartialObject<UmbMediaDetailModel>} [preset]
      * @returns { UmbMediaDetailModel }
      * @memberof UmbMediaServerDataSource
      */
     async createScaffold(preset = {}) {
-        const data = {
+        let mediaTypeIcon = null;
+        let mediaTypeCollection = null;
+        const mediaTypeUnique = preset.mediaType?.unique;
+        if (!mediaTypeUnique) {
+            throw new Error('Media type unique is missing');
+        }
+        const { data } = await new UmbMediaTypeDetailServerDataSource(this).read(mediaTypeUnique);
+        mediaTypeIcon = data?.icon ?? null;
+        mediaTypeCollection = data?.collection ?? null;
+        const defaultData = {
             entityType: UMB_MEDIA_ENTITY_TYPE,
             unique: UmbId.new(),
             mediaType: {
-                unique: '',
-                collection: null,
-                icon: null,
+                unique: mediaTypeUnique,
+                collection: mediaTypeCollection,
+                icon: mediaTypeIcon,
             },
             isTrashed: false,
             values: [],
@@ -43,9 +46,9 @@ export class UmbMediaServerDataSource {
                     updateDate: null,
                 },
             ],
-            ...preset,
         };
-        return { data };
+        const scaffold = umbDeepMerge(preset, defaultData);
+        return { data: scaffold };
     }
     /**
      * Fetches a Media with the given id from the server
@@ -56,7 +59,7 @@ export class UmbMediaServerDataSource {
     async read(unique) {
         if (!unique)
             throw new Error('Unique is missing');
-        const { data, error } = await tryExecute(this.#host, MediaService.getMediaById({ path: { id: unique } }));
+        const { data, error } = await tryExecute(this, MediaService.getMediaById({ path: { id: unique } }));
         if (error || !data) {
             return { error };
         }
@@ -108,7 +111,7 @@ export class UmbMediaServerDataSource {
                 name: variant.name,
             })),
         };
-        const { data, error } = await tryExecute(this.#host, MediaService.postMedia({
+        const { data, error } = await tryExecute(this, MediaService.postMedia({
             body,
         }));
         if (data && typeof data === 'string') {
@@ -131,7 +134,7 @@ export class UmbMediaServerDataSource {
             values: model.values,
             variants: model.variants,
         };
-        const { error } = await tryExecute(this.#host, MediaService.putMediaById({
+        const { error } = await tryExecute(this, MediaService.putMediaById({
             path: { id: model.unique },
             body,
         }));
@@ -149,6 +152,6 @@ export class UmbMediaServerDataSource {
     async delete(unique) {
         if (!unique)
             throw new Error('Unique is missing');
-        return tryExecute(this.#host, MediaService.deleteMediaById({ path: { id: unique } }));
+        return tryExecute(this, MediaService.deleteMediaById({ path: { id: unique } }));
     }
 }

package/dist-cms/packages/media/media/repository/item/media-item.repository.d.ts

@@ -21,7 +21,7 @@ export declare class UmbMediaItemRepository extends UmbItemRepositoryBase<UmbMed
         take: number;
     }): Promise<{
         data: UmbMediaItemModel[];
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
     }>;
 }
 export default UmbMediaItemRepository;

package/dist-cms/packages/media/media/repository/item/media-item.server.data-source.d.ts

@@ -28,10 +28,10 @@ export declare class UmbMediaItemServerDataSource extends UmbItemServerDataSourc
         take: number;
     }): Promise<{
         data: UmbMediaItemModel[];
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
     }>;
     getItems(uniques: Array<string>): Promise<{
         data: UmbMediaItemModel[] | undefined;
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: Error | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | import("@umbraco-cms/backoffice/resources").UmbError | undefined;
     }>;
 }

package/dist-cms/packages/media/media/search/global-search/media-global-search.d.ts

@@ -8,7 +8,7 @@ export declare class UmbMediaGlobalSearch extends UmbGlobalSearchBase<UmbMediaSe
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/search/media-search.repository.d.ts

@@ -13,7 +13,7 @@ export declare class UmbMediaSearchRepository extends UmbControllerBase implemen
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/search/media-search.server.data-source.d.ts

@@ -27,7 +27,7 @@ export declare class UmbMediaSearchServerDataSource implements UmbSearchDataSour
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/search/media.search-provider.d.ts

@@ -10,7 +10,7 @@ export declare class UmbMediaSearchProvider extends UmbControllerBase implements
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
     destroy(): void;

package/dist-cms/packages/media/media/tree/tree-item/media-tree-item.element.js

@@ -11,12 +11,11 @@ const elementName = 'umb-media-tree-item';
 let UmbMediaTreeItemElement = class UmbMediaTreeItemElement extends UmbTreeItemElementBase {
     renderIconContainer() {
         const icon = this.item?.mediaType.icon;
-        const iconWithoutColor = icon?.split(' ')[0];
         return html `
 			<span id="icon-container" slot="icon">
-				${icon && iconWithoutColor
+				${icon
             ? html `
-							<umb-icon id="icon" slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>
+							<umb-icon id="icon" slot="icon" name="${this._getIconToRender(icon)}"></umb-icon>
 							${this.#renderStateIcon()}
 						`
             : nothing}

package/dist-cms/packages/media/media/url/info-app/media-links-workspace-info-app.element.js

@@ -10,7 +10,7 @@ import { css, customElement, html, nothing, repeat, state, when } from '@umbraco
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/entity-action';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
-import { debounce } from '@umbraco-cms/backoffice/utils';
+import { debounce, sanitizeHTML } from '@umbraco-cms/backoffice/utils';
 let UmbMediaLinksWorkspaceInfoAppElement = class UmbMediaLinksWorkspaceInfoAppElement extends UmbLitElement {
     #mediaUrlRepository;
     #urls;
@@ -83,7 +83,7 @@ let UmbMediaLinksWorkspaceInfoAppElement = class UmbMediaLinksWorkspaceInfoAppEl
         const html = `<!doctype html>
 <body style="background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:30px 30px; background-position:0 0, 15px 0, 15px -15px, 0px 15px;">
 	<img src="${imagePath}"/>
-	<script>history.pushState(null, null, "${window.location.href}");</script>
+	<script>history.pushState(null, null, "${sanitizeHTML(window.location.href)}");</script>
 </body>`;
         popup.document.open();
         popup.document.write(html);

package/dist-cms/packages/media/media/url/repository/media-url.server.data-source.d.ts

@@ -16,6 +16,6 @@ export declare class UmbMediaUrlServerDataSource extends UmbItemServerDataSource
     constructor(host: UmbControllerHost);
     getItems(uniques: Array<string>): Promise<{
         data: UmbMediaUrlModel[] | undefined;
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: Error | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | import("@umbraco-cms/backoffice/resources").UmbError | undefined;
     }>;
 }