Merge remote-tracking branch 'origin/main' into feature/block-editor-type-workspace

src/Umbraco.Web.UI.Client/src/external/router-slot/util/anchor.ts

@@ -3,7 +3,12 @@
  * that has a relative HREF, uses the history API instead.
  */
 export function ensureAnchorHistory() {
+	const isWindows = navigator.platform.toUpperCase().indexOf('WIN') !== -1;
+
 	window.addEventListener('click', (e: MouseEvent) => {
+		// If we try to open link in a new tab, then we want to skip skip:
+		if ((isWindows && e.ctrlKey) || (!isWindows && e.metaKey)) return;
+
 		// Find the target by using the composed path to get the element through the shadow boundaries.
 		const $anchor = (('composedPath' in e) as any)
 			? e.composedPath().find(($elem) => $elem instanceof HTMLAnchorElement)

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts

@@ -1,5 +1,5 @@
 import { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
-import { UmbMediaTypeInputElement } from '@umbraco-cms/backoffice/media-type';
+import { UmbInputMediaTypeElement } from '@umbraco-cms/backoffice/media-type';
 import { UmbMemberTypeInputElement } from '@umbraco-cms/backoffice/member-type';
 import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -62,7 +62,7 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
 				this.value = (<UmbInputDocumentTypeElement>event.target).selectedIds;
 				break;
 			case 'media':
-				this.value = (<UmbMediaTypeInputElement>event.target).selectedIds;
+				this.value = (<UmbInputMediaTypeElement>event.target).selectedIds;
 				break;
 			case 'member':
 				this.value = (<UmbMemberTypeInputElement>event.target).selectedIds;
@@ -98,9 +98,9 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
 	}
 
 	#renderTypeMedia() {
-		return html`<umb-media-type-input
+		return html`<umb-input-media-type
 			@change=${this.#onChange}
-			.selectedIds=${this.value || []}></umb-media-type-input>`;
+			.selectedIds=${this.value || []}></umb-input-media-type>`;
 	}
 
 	#renderTypeMember() {

src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/index.ts

@@ -1,3 +1,3 @@
-import './media-type-input/media-type-input.element.js';
+import './input-media-type/input-media-type.element.js';
 
-export * from './media-type-input/media-type-input.element.js';
+export * from './input-media-type/input-media-type.element.js';

src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts

@@ -1,12 +1,12 @@
-import { UmbMediaTypePickerContext } from './media-type-input.context.js';
+import { UmbMediaTypePickerContext } from './input-media-type.context.js';
 import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { MediaTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
-@customElement('umb-media-type-input')
-export class UmbMediaTypeInputElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-media-type')
+export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -130,10 +130,10 @@ export class UmbMediaTypeInputElement extends FormControlMixin(UmbLitElement) {
 	];
 }
 
-export default UmbMediaTypeInputElement;
+export default UmbInputMediaTypeElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-media-type-input': UmbMediaTypeInputElement;
+		'umb-input-media-type': UmbInputMediaTypeElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/structure/media-type-workspace-view-structure.element.ts

@@ -1,5 +1,5 @@
 import { UmbMediaTypeWorkspaceContext } from '../../media-type-workspace.context.js';
-import type { UmbMediaTypeInputElement } from '../../../components/media-type-input/media-type-input.element.js';
+import type { UmbInputMediaTypeElement } from '../../../components/input-media-type/input-media-type.element.js';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
@@ -59,16 +59,16 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 					</div>
 					<div slot="editor">
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
-						<umb-media-type-input
+						<umb-input-media-type
 							.selectedIds=${this._allowedContentTypeIDs ?? []}
 							@change="${(e: CustomEvent) => {
-								const sortedContentTypesList = (e.target as UmbMediaTypeInputElement).selectedIds.map((id, index) => ({
+								const sortedContentTypesList = (e.target as UmbInputMediaTypeElement).selectedIds.map((id, index) => ({
 									id: id,
 									sortOrder: index,
 								}));
 								this.#workspaceContext?.updateProperty('allowedContentTypes', sortedContentTypesList);
 							}}">
-						</umb-media-type-input>
+						</umb-input-media-type>
 					</div>
 				</umb-property-layout>
 			</uui-box>