Merge branch 'main' into feature/validation-take-4

src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.element.ts

@@ -1,7 +1,7 @@
 import { html, customElement, property, map, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
 import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui';
 
@@ -11,25 +11,24 @@ import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui
  */
 @customElement('umb-input-color')
 export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') {
-	@property({ type: Boolean })
-	showLabels = false;
-
-	@property({ type: Array })
-	swatches?: UmbSwatchDetails[];
-
 	protected getFormElement() {
 		return undefined;
 	}
 
+	@property({ type: Boolean })
+	showLabels = false;
+
+	@property({ type: Array })
+	swatches?: Array<UmbSwatchDetails>;
+
 	#onChange(event: UUIColorSwatchesEvent) {
-		event.stopPropagation();
 		this.value = event.target.value;
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	render() {
 		return html`
-			<uui-color-swatches label="Color picker" value="#${this.value ?? ''}" @change=${this.#onChange}>
+			<uui-color-swatches label="Color picker" value=${this.value ?? ''} @change=${this.#onChange}>
 				${this.#renderColors()}
 			</uui-color-swatches>
 		`;
@@ -40,10 +39,7 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '')
 		return map(
 			this.swatches,
 			(swatch) => html`
-				<uui-color-swatch
-					label="${swatch.label}"
-					value="#${swatch.value}"
-					.showLabel=${this.showLabels}></uui-color-swatch>
+				<uui-color-swatch label=${swatch.label} value=${swatch.value} .showLabel=${this.showLabels}></uui-color-swatch>
 			`,
 		);
 	}

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column/column-configuration.element.ts

@@ -1,5 +1,5 @@
 import type { UmbCollectionColumnConfiguration } from '../../../../../collection/types.js';
-import { html, customElement, property, repeat, css, state, nothing, when } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, repeat, css, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -16,7 +16,6 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
-
 	// TODO: [LK] Add sorting.
 
 	@property({ type: Array })
@@ -74,15 +73,11 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 	}
 
 	render() {
-		if (!this.value) return nothing;
+		return html`${this.#renderColumns()} ${this.#renderInput()}`;
+	}
+
+	#renderInput() {
 		return html`
-			<div id="layout-wrapper">
-				${repeat(
-					this.value,
-					(column) => column.alias,
-					(column) => this.#renderField(column),
-				)}
-			</div>
 			<umb-input-content-type-property
 				document-types
 				media-types
@@ -90,7 +85,20 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 		`;
 	}
 
-	#renderField(column: UmbCollectionColumnConfiguration) {
+	#renderColumns() {
+		if (!this.value) return nothing;
+		return html`
+			<div id="layout-wrapper">
+				${repeat(
+					this.value,
+					(column) => column.alias,
+					(column) => this.#renderColumn(column),
+				)}
+			</div>
+		`;
+	}
+
+	#renderColumn(column: UmbCollectionColumnConfiguration) {
 		return html`
 			<div class="layout-item">
 				<uui-icon name="icon-navigation"></uui-icon>

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout/layout-configuration.element.ts

@@ -51,6 +51,8 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 	#onAdd(event: { target: UmbInputManifestElement }) {
 		const manifest = event.target.value;
 
+		// TODO: [LK] Disallow duplicate `collectionView` aliases selections. [LK]
+
 		this.value = [
 			...(this.value ?? []),
 			{
@@ -97,6 +99,14 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 	}
 
 	render() {
+		return html`${this.#renderLayouts()} ${this.#renderInput()}`;
+	}
+
+	#renderInput() {
+		return html`<umb-input-manifest extension-type="collectionView" @change=${this.#onAdd}></umb-input-manifest>`;
+	}
+
+	#renderLayouts() {
 		if (!this.value) return nothing;
 		return html`
 			<div id="layout-wrapper">
@@ -106,7 +116,6 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 					(layout, index) => this.#renderLayout(layout, index),
 				)}
 			</div>
-			<umb-input-manifest extension-type="collectionView" @change=${this.#onAdd}></umb-input-manifest>
 		`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts

@@ -14,20 +14,38 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 	#defaultShowLabels = false;
 
 	@property({ type: Object })
-	value?: UmbSwatchDetails;
+	public set value(value: UmbSwatchDetails | undefined) {
+		if (!value) return;
+		this.#value = this.#ensureHashPrefix(value);
+	}
+	public get value(): UmbSwatchDetails | undefined {
+		return this.#value;
+	}
+	#value?: UmbSwatchDetails | undefined;
 
 	@state()
 	private _showLabels = this.#defaultShowLabels;
 
 	@state()
-	private _swatches: UmbSwatchDetails[] = [];
+	private _swatches: Array<UmbSwatchDetails> = [];
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
-		this._swatches = config?.getValueByAlias('items') ?? [];
+		if (!config) return;
+
+		this._showLabels = config?.getValueByAlias<boolean>('useLabel') ?? this.#defaultShowLabels;
+
+		const swatches = config?.getValueByAlias<Array<UmbSwatchDetails>>('items') ?? [];
+		this._swatches = swatches.map((swatch) => this.#ensureHashPrefix(swatch));
 	}
 
-	private _onChange(event: UUIColorSwatchesEvent) {
+	#ensureHashPrefix(swatch: UmbSwatchDetails): UmbSwatchDetails {
+		return {
+			label: swatch.label,
+			value: swatch.value.startsWith('#') ? swatch.value : `#${swatch.value}`,
+		};
+	}
+
+	#onChange(event: UUIColorSwatchesEvent) {
 		const value = event.target.value;
 		this.value = this._swatches.find((swatch) => swatch.value === value);
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -35,10 +53,10 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 
 	render() {
 		return html`<umb-input-color
-			?showLabels=${this._showLabels}
+			value=${this.value?.value ?? ''}
 			.swatches=${this._swatches}
-			.value=${this.value?.value ?? ''}
-			@change=${this._onChange}></umb-input-color>`;
+			?showLabels=${this._showLabels}
+			@change=${this.#onChange}></umb-input-color>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/data-type/tree/data-type-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbDataTypeTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbDataTypeTreeRootModel = {
 			unique: null,
 			entityType: UMB_DATA_TYPE_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_dataTypes',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/dictionary/tree/dictionary-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbDictionaryTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbDictionaryTreeRootModel = {
 			unique: null,
 			entityType: UMB_DICTIONARY_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_dictionary',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/tree/document-blueprint-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbDocumentBlueprintTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbDocumentBlueprintTreeRootModel = {
 			unique: null,
 			entityType: UMB_DOCUMENT_BLUEPRINT_ENTITY_TYPE,
 			name: 'Document Blueprints',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/document-type-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbDocumentTypeTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbDocumentTypeTreeRootModel = {
 			unique: null,
 			entityType: UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_documentTypes',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/document-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbDocumentTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbDocumentTreeRootModel = {
 			unique: null,
 			entityType: UMB_DOCUMENT_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_content',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/media-type-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbMediaTypeTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbMediaTypeTreeRootModel = {
 			unique: null,
 			entityType: UMB_MEDIA_TYPE_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_mediaTypes',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/media/media/tree/media-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbMediaTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbMediaTreeRootModel = {
 			unique: null,
 			entityType: UMB_MEDIA_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_media',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/member-type-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbMemberTypeTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbMemberTypeTreeRootModel = {
 			unique: null,
 			entityType: UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_memberTypes',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/static-file/tree/static-file-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbStaticFileTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbStaticFileTreeRootModel = {
 			unique: null,
 			entityType: UMB_STATIC_FILE_ROOT_ENTITY_TYPE,
 			name: 'Static Files',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/partial-view-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbPartialViewTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbPartialViewTreeRootModel = {
 			unique: null,
 			entityType: UMB_PARTIAL_VIEW_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_partialViews',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts

@@ -12,11 +12,14 @@ export class UmbScriptTreeRepository extends UmbTreeRepositoryBase<UmbScriptTree
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbScriptTreeRootModel = {
 			unique: null,
 			entityType: UMB_SCRIPT_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_scripts',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.repository.ts

@@ -14,11 +14,14 @@ export class UmbStylesheetTreeRepository extends UmbTreeRepositoryBase<
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbStylesheetTreeRootModel = {
 			unique: null,
 			entityType: UMB_STYLESHEET_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_stylesheets',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/template-tree.repository.ts

@@ -15,11 +15,14 @@ export class UmbTemplateTreeRepository
 	}
 
 	async requestTreeRoot() {
+		const { data: treeRootData } = await this._treeSource.getRootItems({ skip: 0, take: 1 });
+		const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+
 		const data: UmbTemplateTreeRootModel = {
 			unique: null,
 			entityType: UMB_TEMPLATE_ROOT_ENTITY_TYPE,
 			name: '#treeHeaders_templates',
-			hasChildren: true,
+			hasChildren,
 			isFolder: true,
 		};