@umbraco-cms/backoffice 17.5.3 → 17.6.0-rc

package/dist-cms/packages/property-editors/collection/config/layout/layout-configuration.element.js

@@ -4,35 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, ifDefined, nothing, property, repeat, when, } from '../../../../../external/lit/index.js';
+import { css, customElement, html, ifDefined, property, when } from '../../../../../external/lit/index.js';
 import { extractUmbColorVariable } from '../../../../core/resources/index.js';
 import { simpleHashCode } from '../../../../../libs/observable-api/index.js';
-import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { umbConfirmModal } from '../../../../core/modal/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
-import { UmbTextStyles } from '../../../../core/style/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UMB_ICON_PICKER_MODAL } from '../../../../core/icon-registry/index.js';
+import '../../../../core/sorter/index.js';
 /**
  * @element umb-property-editor-ui-collection-layout-configuration
  */
 let UmbPropertyEditorUICollectionLayoutConfigurationElement = class UmbPropertyEditorUICollectionLayoutConfigurationElement extends UmbLitElement {
-    #sorter = new UmbSorterController(this, {
-        getUniqueOfElement: (element) => {
-            return element.id;
-        },
-        getUniqueOfModel: (modelEntry) => {
-            return this.#getUnique(modelEntry);
-        },
-        itemSelector: '.layout-item',
-        containerSelector: '#layout-wrapper',
-        onChange: ({ model }) => {
-            this.value = model;
-            this.dispatchEvent(new UmbChangeEvent());
-        },
-    });
     set value(value) {
         this.#value = value ?? [];
-        this.#sorter.setModel(this.#value);
     }
     get value() {
         return this.#value;
@@ -40,10 +25,16 @@ let UmbPropertyEditorUICollectionLayoutConfigurationElement = class UmbPropertyE
     #value = [];
     async #focusNewItem() {
         await this.updateComplete;
-        const input = this.shadowRoot?.querySelector('.layout-item:last-of-type > uui-input');
-        input.focus();
+        const list = this.shadowRoot?.querySelector('umb-sortable-list');
+        await list?.updateComplete;
+        const item = list?.shadowRoot?.querySelector('umb-sortable-list-item:last-of-type');
+        // The item's <slot> only exists in its shadow root once its own first update completes, so its
+        // slotted uui-input isn't part of the rendered tree (and therefore not focusable) until then.
+        await item?.updateComplete;
+        const input = item?.querySelector('uui-input');
+        input?.focus();
     }
-    #onAdd(event) {
+    async #onAdd(event) {
         const manifest = event.target.value;
         const duplicate = this.value?.find((config) => manifest?.value === config.collectionView);
         if (duplicate) {
@@ -60,17 +51,24 @@ let UmbPropertyEditorUICollectionLayoutConfigurationElement = class UmbPropertyE
             },
         ];
         this.dispatchEvent(new UmbChangeEvent());
-        this.#focusNewItem();
+        await this.#focusNewItem();
     }
     #onChangeLabel(e, index) {
+        e.stopPropagation();
         const values = [...(this.value ?? [])];
         values[index] = { ...values[index], name: e.target.value };
         this.value = values;
         this.dispatchEvent(new UmbChangeEvent());
     }
-    #onRemove(unique) {
+    async #onRemove(layout, index) {
+        await umbConfirmModal(this, {
+            color: 'danger',
+            headline: `#actions_remove?`,
+            content: `#defaultdialogs_confirmremove ${layout.name ?? ''}?`,
+            confirmLabel: '#actions_remove',
+        });
         const values = [...(this.value ?? [])];
-        values.splice(unique, 1);
+        values.splice(index, 1);
         this.value = values;
         this.dispatchEvent(new UmbChangeEvent());
     }
@@ -92,94 +90,61 @@ let UmbPropertyEditorUICollectionLayoutConfigurationElement = class UmbPropertyE
     #getUnique(layout) {
         return 'x' + simpleHashCode('' + layout.collectionView + layout.name + layout.icon).toString(16);
     }
+    #onSort(e) {
+        this.value = e.target.items;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
     render() {
         return html `
-			<div id="layout-wrapper">${this.#renderLayouts()}</div>
+			<umb-sortable-list
+				.items=${this.value}
+				.getUnique=${(layout) => this.#getUnique(layout)}
+				.renderMethod=${(layout, index) => this.#renderLayout(layout, index)}
+				@change=${this.#onSort}></umb-sortable-list>
 			${this.#renderInput()}
 		`;
     }
     #renderInput() {
         return html `<umb-input-manifest extension-type="collectionView" @change=${this.#onAdd}></umb-input-manifest>`;
     }
-    #renderLayouts() {
-        if (!this.value)
-            return nothing;
-        return repeat(this.value, (layout) => this.#getUnique(layout), (layout, index) => this.#renderLayout(layout, index));
-    }
     #renderLayout(layout, index) {
         const icon = this.#parseIcon(layout.icon);
         const varName = icon.color ? extractUmbColorVariable(icon.color) : undefined;
         return html `
-			<div class="layout-item" id=${this.#getUnique(layout)}>
-				<uui-icon class="drag-handle" name="icon-grip"></uui-icon>
-
-				<uui-button compact look="outline" label="pick icon" @click=${() => this.#onIconChange(icon, index)}>
-					${when(icon.color, () => html `<uui-icon name=${ifDefined(icon.icon)} style="color:var(${varName})"></uui-icon>`, () => html `<uui-icon name=${ifDefined(icon.icon)}></uui-icon>`)}
-				</uui-button>
-
-				<uui-input
-					label="name"
-					value=${ifDefined(layout.name)}
-					placeholder="Enter a label..."
-					@change=${(e) => this.#onChangeLabel(e, index)}></uui-input>
-
-				<div class="alias">
-					<code>${layout.collectionView}</code>
-				</div>
-
-				<div class="actions">
+			<umb-sortable-list-item .unique=${this.#getUnique(layout)}>
+				<div style="display:flex;align-items:center;gap:var(--uui-size-6);">
 					<uui-button
-						label=${this.localize.term('general_remove')}
-						look="secondary"
-						@click=${() => this.#onRemove(index)}></uui-button>
+						compact
+						look="outline"
+						label="pick icon"
+						style="min-width:var(--uui-size-11);"
+						@click=${() => this.#onIconChange(icon, index)}>
+						${when(icon.color, () => html `<uui-icon name=${ifDefined(icon.icon)} style="color:var(${varName})"></uui-icon>`, () => html `<uui-icon name=${ifDefined(icon.icon)}></uui-icon>`)}
+					</uui-button>
+					<uui-input
+						label="name"
+						value=${ifDefined(layout.name)}
+						placeholder="Enter a label..."
+						style="flex:1;"
+						@change=${(e) => this.#onChangeLabel(e, index)}>
+					</uui-input>
+					<div class="alias" style="flex:1;word-break:break-all;">
+						<code>${layout.collectionView}</code>
+					</div>
 				</div>
-			</div>
+				<uui-action-bar slot="actions">
+					<uui-button label=${this.localize.term('general_remove')} @click=${() => this.#onRemove(layout, index)}>
+						<uui-icon name="icon-trash"></uui-icon> </uui-button
+				></uui-action-bar>
+			</umb-sortable-list-item>
 		`;
     }
     static { this.styles = [
-        UmbTextStyles,
         css `
-			#layout-wrapper {
-				display: flex;
-				flex-direction: column;
-				gap: 1px;
+			umb-sortable-list {
+				display: block;
 				margin-bottom: var(--uui-size-1);
 			}
-
-			.layout-item {
-				background-color: var(--uui-color-surface-alt);
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-6);
-				padding: var(--uui-size-3) var(--uui-size-6);
-			}
-
-			.layout-item > uui-icon {
-				flex: 0 0 var(--uui-size-6);
-			}
-
-			.layout-item > uui-button {
-				flex: 0 0 var(--uui-size-10);
-			}
-
-			.layout-item > uui-input,
-			.layout-item > .alias {
-				flex: 1;
-			}
-
-			.layout-item > .actions {
-				flex: 0 0 auto;
-				display: flex;
-				justify-content: flex-end;
-			}
-
-			.drag-handle {
-				cursor: grab;
-			}
-
-			.drag-handle:active {
-				cursor: grabbing;
-			}
 		`,
     ]; }
 };

package/dist-cms/packages/property-editors/collection/config/layout/manifests.js

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Collection Layout Configuration',
         icon: 'icon-autofill',
-        group: 'lists',
+        group: '#propertyEditorUIGroups_lists',
     },
 };

package/dist-cms/packages/property-editors/collection/config/order-by/manifests.js

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Collection Order By',
         icon: 'icon-autofill',
-        group: 'lists',
+        group: '#propertyEditorUIGroups_lists',
     },
 };

package/dist-cms/packages/property-editors/collection/manifests.js

@@ -11,7 +11,7 @@ const propertyEditorUiManifest = {
         label: 'Collection',
         propertyEditorSchemaAlias: 'Umbraco.ListView',
         icon: 'icon-layers',
-        group: 'lists',
+        group: '#propertyEditorUIGroups_lists',
         keywords: ['list', 'children', 'items', 'listview', 'table', 'overview'],
         settings: {
             properties: [

package/dist-cms/packages/property-editors/color-picker/manifests.js

@@ -11,7 +11,7 @@ export const manifests = [
             label: 'Color Picker',
             propertyEditorSchemaAlias: 'Umbraco.ColorPicker',
             icon: 'icon-colorpicker',
-            group: 'pickers',
+            group: '#propertyEditorUIGroups_pickers',
             keywords: [
                 'select',
                 'color',

package/dist-cms/packages/property-editors/color-swatches-editor/manifests.js

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Color Swatches Editor',
         icon: 'icon-page-add',
-        group: 'pickers',
+        group: '#propertyEditorUIGroups_pickers',
     },
 };

package/dist-cms/packages/property-editors/content-picker/components/input-content/input-content.element.d.ts

@@ -8,9 +8,33 @@ export declare class UmbInputContentElement extends UmbInputContentElement_base
     #private;
     set type(newType: UmbContentPickerSource['type']);
     get type(): UmbContentPickerSource['type'];
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
     min: number;
+    /**
+     * Min validation message.
+     * @type {string}
+     * @attr
+     * @default
+     */
     minMessage: string;
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
     max: number;
+    /**
+     * Max validation message.
+     * @type {string}
+     * @attr
+     * @default
+     */
     maxMessage: string;
     startNode?: UmbTreeStartNode;
     set allowedContentTypeIds(value: string | undefined);

package/dist-cms/packages/property-editors/content-picker/components/input-content/input-content.element.js

@@ -45,9 +45,33 @@ let UmbInputContentElement = class UmbInputContentElement extends UmbFormControl
     constructor() {
         super();
         this.#type = 'content';
+        /**
+         * This is a minimum amount of selected items in this input.
+         * @type {number}
+         * @attr
+         * @default 0
+         */
         this.min = 0;
-        this.minMessage = 'This field need more items';
+        /**
+         * Min validation message.
+         * @type {string}
+         * @attr
+         * @default
+         */
+        this.minMessage = 'This field needs more items';
+        /**
+         * This is a maximum amount of selected items in this input.
+         * @type {number}
+         * @attr
+         * @default 0
+         */
         this.max = 0;
+        /**
+         * Max validation message.
+         * @type {string}
+         * @attr
+         * @default
+         */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.

package/dist-cms/packages/property-editors/content-picker/config/source-content/input-content-picker-source.element.d.ts

@@ -1,7 +1,7 @@
 import type { UmbContentPickerDynamicRoot, UmbContentPickerSourceType } from '../../types.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import '../../dynamic-root/components/input-content-picker-document-root.element.js';
-declare const UmbInputContentPickerSourceElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbInputContentPickerSourceElement_base: (new (...args: any[]) => import("@umbraco-ui/uui").UUIFormControlWithBasicsMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
 export declare class UmbInputContentPickerSourceElement extends UmbInputContentPickerSourceElement_base {
     #private;
     protected getFormElement(): undefined;

package/dist-cms/packages/property-editors/content-picker/config/source-content/manifests.js

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Content Picker Source',
         icon: 'icon-page-add',
-        group: 'pickers',
+        group: '#propertyEditorUIGroups_pickers',
     },
 };

package/dist-cms/packages/property-editors/content-picker/config/source-type/manifests.js

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Content Picker Source Type Picker',
         icon: 'icon-page-add',
-        group: 'pickers',
+        group: '#propertyEditorUIGroups_pickers',
     },
 };

package/dist-cms/packages/property-editors/content-picker/constants.d.ts

@@ -1 +1,2 @@
 export * from './dynamic-root/constants.js';
+export * from './value-type/constants.js';

package/dist-cms/packages/property-editors/content-picker/constants.js

@@ -1 +1,2 @@
 export * from './dynamic-root/constants.js';
+export * from './value-type/constants.js';

package/dist-cms/packages/property-editors/content-picker/manifests.js

@@ -2,6 +2,7 @@ import { manifest as sourceManifest } from './config/source-content/manifests.js
 import { manifest as sourceTypeManifest } from './config/source-type/manifests.js';
 import { manifest as schemaManifest } from './Umbraco.MultiNodeTreePicker.js';
 import { manifests as dynamicRootManifests } from './dynamic-root/manifests.js';
+import { manifests as valueSummaryManifests } from './value-summary/manifests.js';
 const manifest = {
     type: 'propertyEditorUi',
     alias: 'Umb.PropertyEditorUi.ContentPicker',
@@ -10,7 +11,7 @@ const manifest = {
     meta: {
         label: 'Content Picker',
         icon: 'icon-page-add',
-        group: 'pickers',
+        group: '#propertyEditorUIGroups_pickers',
         keywords: ['select', 'page', 'node', 'reference', 'related', 'link', 'pages', 'content'],
         propertyEditorSchemaAlias: 'Umbraco.MultiNodeTreePicker',
         supportsReadOnly: true,
@@ -27,4 +28,10 @@ const manifest = {
     },
 };
 const config = [sourceManifest, sourceTypeManifest];
-export const manifests = [manifest, ...config, schemaManifest, ...dynamicRootManifests];
+export const manifests = [
+    manifest,
+    ...config,
+    schemaManifest,
+    ...dynamicRootManifests,
+    ...valueSummaryManifests,
+];

package/dist-cms/packages/property-editors/content-picker/value-summary/manifests.d.ts

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

package/dist-cms/packages/property-editors/content-picker/value-summary/manifests.js

@@ -0,0 +1,12 @@
+import { UMB_CONTENT_PICKER_PROPERTY_EDITOR_VALUE_TYPE } from '../value-type/constants.js';
+export const manifests = [
+    {
+        type: 'valueSummary',
+        kind: 'default',
+        alias: 'Umb.ValueSummary.PropertyEditor.ContentPicker',
+        name: 'Content Picker Property Editor Value Summary',
+        forValueType: UMB_CONTENT_PICKER_PROPERTY_EDITOR_VALUE_TYPE,
+        element: () => import('./value-summary.js'),
+        valueResolver: () => import('./value-summary.js'),
+    },
+];

package/dist-cms/packages/property-editors/content-picker/value-summary/value-summary.d.ts

@@ -0,0 +1,2 @@
+export { UmbContentPickerPropertyEditorValueSummaryElement as element } from './value-summary.element.js';
+export { UmbContentPickerValueSummaryResolver as valueResolver } from './value-summary.resolver.js';

package/dist-cms/packages/property-editors/content-picker/value-summary/value-summary.element.d.ts

@@ -0,0 +1,15 @@
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbValueSummaryElementBase } from '../../../core/value-summary/index.js';
+import type { UmbContentPickerResolvedItem } from './value-summary.resolver.js';
+import type { PropertyValueMap } from '../../../../external/lit/index.js';
+export declare class UmbContentPickerPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<Array<UmbContentPickerResolvedItem>> {
+    #private;
+    private _names;
+    protected willUpdate(changedProperties: PropertyValueMap<this>): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-content-picker-property-editor-value-summary': UmbContentPickerPropertyEditorValueSummaryElement;
+    }
+}

package/dist-cms/packages/property-editors/content-picker/value-summary/value-summary.element.js

@@ -0,0 +1,71 @@
+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 { customElement, nothing, html, state } from '../../../../external/lit/index.js';
+import { UmbValueSummaryElementBase } from '../../../core/value-summary/index.js';
+import { UMB_DOCUMENT_ENTITY_TYPE, UmbDocumentItemDataResolver } from '../../../documents/documents/index.js';
+let UmbContentPickerPropertyEditorValueSummaryElement = class UmbContentPickerPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase {
+    constructor() {
+        super(...arguments);
+        this._names = [];
+        this.#documentResolvers = new Map();
+        this.#resolvedDocNames = new Map();
+    }
+    #documentResolvers;
+    #resolvedDocNames;
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('_value')) {
+            this.#syncResolvers();
+        }
+    }
+    #syncResolvers() {
+        const value = this._value ?? [];
+        const docEntries = value.filter((e) => e.entityType === UMB_DOCUMENT_ENTITY_TYPE);
+        for (const unique of this.#documentResolvers.keys()) {
+            if (!docEntries.find((e) => e.unique === unique)) {
+                this.#documentResolvers.get(unique)?.destroy();
+                this.#documentResolvers.delete(unique);
+                this.#resolvedDocNames.delete(unique);
+            }
+        }
+        for (const entry of docEntries) {
+            if (!this.#documentResolvers.has(entry.unique)) {
+                const resolver = new UmbDocumentItemDataResolver(this);
+                resolver.setData(entry);
+                this.#documentResolvers.set(entry.unique, resolver);
+                this.observe(resolver.name, (name) => {
+                    this.#resolvedDocNames.set(entry.unique, name ?? '');
+                    this.#buildNames();
+                }, `doc-${entry.unique}`);
+            }
+        }
+        this.#buildNames();
+    }
+    #buildNames() {
+        this._names = (this._value ?? []).map((entry) => {
+            if (entry.entityType === UMB_DOCUMENT_ENTITY_TYPE) {
+                return this.#resolvedDocNames.get(entry.unique) ?? '';
+            }
+            return entry.name;
+        });
+    }
+    render() {
+        if (!this._value?.length)
+            return nothing;
+        const text = this._names.filter(Boolean).join(', ');
+        if (!text)
+            return nothing;
+        return html `<span title="${text}">${text}</span>`;
+    }
+};
+__decorate([
+    state()
+], UmbContentPickerPropertyEditorValueSummaryElement.prototype, "_names", void 0);
+UmbContentPickerPropertyEditorValueSummaryElement = __decorate([
+    customElement('umb-content-picker-property-editor-value-summary')
+], UmbContentPickerPropertyEditorValueSummaryElement);
+export { UmbContentPickerPropertyEditorValueSummaryElement };

package/dist-cms/packages/property-editors/content-picker/value-summary/value-summary.js

@@ -0,0 +1,2 @@
+export { UmbContentPickerPropertyEditorValueSummaryElement as element } from './value-summary.element.js';
+export { UmbContentPickerValueSummaryResolver as valueResolver } from './value-summary.resolver.js';

package/dist-cms/packages/property-editors/content-picker/value-summary/value-summary.resolver.d.ts

@@ -0,0 +1,13 @@
+import type { UmbValueSummaryResolveResult, UmbValueSummaryResolver } from '../../../core/value-summary/index.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbReferenceByUniqueAndType } from '../../../core/models/index.js';
+import type { UmbDocumentItemModel } from '../../../documents/documents/index.js';
+import type { UmbMediaItemModel } from '../../../media/media/index.js';
+import type { UmbMemberItemModel } from '../../../members/member/index.js';
+type ContentPickerValue = Array<UmbReferenceByUniqueAndType> | undefined;
+export type UmbContentPickerResolvedItem = UmbDocumentItemModel | UmbMediaItemModel | UmbMemberItemModel;
+export declare class UmbContentPickerValueSummaryResolver extends UmbControllerBase implements UmbValueSummaryResolver<ContentPickerValue, Array<UmbContentPickerResolvedItem>> {
+    #private;
+    resolveValues(values: ReadonlyArray<ContentPickerValue>): Promise<UmbValueSummaryResolveResult<Array<UmbContentPickerResolvedItem>>>;
+}
+export {};

package/dist-cms/packages/property-editors/content-picker/value-summary/value-summary.resolver.js

@@ -0,0 +1,54 @@
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import { UmbDocumentItemRepository, UMB_DOCUMENT_ENTITY_TYPE } from '../../../documents/documents/index.js';
+import { UmbMediaItemRepository, UMB_MEDIA_ENTITY_TYPE } from '../../../media/media/index.js';
+import { UmbMemberItemRepository, UMB_MEMBER_ENTITY_TYPE } from '../../../members/member/index.js';
+import { combineLatest, map, of } from '../../../../external/rxjs/index.js';
+export class UmbContentPickerValueSummaryResolver extends UmbControllerBase {
+    #documentRepo = new UmbDocumentItemRepository(this);
+    #mediaRepo = new UmbMediaItemRepository(this);
+    #memberRepo = new UmbMemberItemRepository(this);
+    async resolveValues(values) {
+        const allItems = values.flatMap((v) => v ?? []);
+        const docKeys = [...new Set(allItems.filter((e) => e.type === UMB_DOCUMENT_ENTITY_TYPE).map((e) => e.unique))];
+        const mediaKeys = [...new Set(allItems.filter((e) => e.type === UMB_MEDIA_ENTITY_TYPE).map((e) => e.unique))];
+        const memberKeys = [...new Set(allItems.filter((e) => e.type === UMB_MEMBER_ENTITY_TYPE).map((e) => e.unique))];
+        if (!docKeys.length && !mediaKeys.length && !memberKeys.length) {
+            return { data: values.map(() => []) };
+        }
+        const [docResult, mediaResult, memberResult] = await Promise.all([
+            docKeys.length ? this.#documentRepo.requestItems(docKeys) : Promise.resolve(undefined),
+            mediaKeys.length ? this.#mediaRepo.requestItems(mediaKeys) : Promise.resolve(undefined),
+            memberKeys.length ? this.#memberRepo.requestItems(memberKeys) : Promise.resolve(undefined),
+        ]);
+        const docs = (Array.isArray(docResult?.data) ? docResult?.data : []);
+        const media = (Array.isArray(mediaResult?.data) ? mediaResult?.data : []);
+        const members = (Array.isArray(memberResult?.data) ? memberResult?.data : []);
+        const docObs = docResult?.asObservable?.() ?? of(docs);
+        const mediaObs = mediaResult?.asObservable?.() ?? of(media);
+        const memberObs = memberResult?.asObservable?.() ?? of(members);
+        return {
+            data: this.#map(values, docs, media, members),
+            asObservable: () => combineLatest([docObs, mediaObs, memberObs]).pipe(map(([documents, mediaItems, memberItems]) => this.#map(values, documents, mediaItems, memberItems))),
+        };
+    }
+    #map(values, docs, media, members) {
+        const docsByKey = new Map(docs.map((item) => [item.unique, item]));
+        const mediaByKey = new Map(media.map((item) => [item.unique, item]));
+        const memberByKey = new Map(members.map((item) => [item.unique, item]));
+        return values.map((value) => (value ?? []).flatMap((entry) => {
+            if (entry.type === UMB_DOCUMENT_ENTITY_TYPE) {
+                const item = docsByKey.get(entry.unique);
+                return item ? [item] : [];
+            }
+            if (entry.type === UMB_MEDIA_ENTITY_TYPE) {
+                const item = mediaByKey.get(entry.unique);
+                return item ? [item] : [];
+            }
+            if (entry.type === UMB_MEMBER_ENTITY_TYPE) {
+                const item = memberByKey.get(entry.unique);
+                return item ? [item] : [];
+            }
+            return [];
+        }));
+    }
+}

package/dist-cms/packages/property-editors/content-picker/value-type/constants.d.ts

@@ -0,0 +1,7 @@
+import type { UmbReferenceByUniqueAndType } from '../../../core/models/index.js';
+export declare const UMB_CONTENT_PICKER_PROPERTY_EDITOR_VALUE_TYPE: "Umbraco.MultiNodeTreePicker";
+declare global {
+    interface UmbValueTypeMap {
+        [UMB_CONTENT_PICKER_PROPERTY_EDITOR_VALUE_TYPE]: Array<UmbReferenceByUniqueAndType>;
+    }
+}

package/dist-cms/packages/property-editors/content-picker/value-type/constants.js

@@ -0,0 +1 @@
+export const UMB_CONTENT_PICKER_PROPERTY_EDITOR_VALUE_TYPE = 'Umbraco.MultiNodeTreePicker';

package/dist-cms/packages/property-editors/date-picker/manifests.js

@@ -9,7 +9,7 @@ export const manifests = [
             label: 'Date Picker',
             propertyEditorSchemaAlias: 'Umbraco.DateTime',
             icon: 'icon-time',
-            group: 'pickers',
+            group: '#propertyEditorUIGroups_pickers',
             keywords: ['select', 'date', 'calendar', 'schedule', 'event'],
             supportsReadOnly: true,
             settings: {

package/dist-cms/packages/property-editors/date-time/date-only-picker/manifests.js

@@ -1,4 +1,5 @@
 import { manifest as schemaManifest } from './Umbraco.DateOnly.js';
+import { manifests as valueSummaryManifests } from './value-summary/manifests.js';
 export const manifests = [
     {
         type: 'propertyEditorUi',
@@ -9,10 +10,11 @@ export const manifests = [
             label: 'Date Only',
             propertyEditorSchemaAlias: 'Umbraco.DateOnly',
             icon: 'icon-calendar-alt',
-            group: 'date',
+            group: '#propertyEditorUIGroups_date',
             keywords: ['date', 'calendar', 'birthday', 'deadline', 'day', 'anniversary', 'expiry', 'start', 'end', 'release'],
             supportsReadOnly: true,
         },
     },
     schemaManifest,
+    ...valueSummaryManifests,
 ];

package/dist-cms/packages/property-editors/date-time/date-only-picker/value-summary/manifests.d.ts

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

package/dist-cms/packages/property-editors/date-time/date-only-picker/value-summary/manifests.js

@@ -0,0 +1,11 @@
+import { UMB_DATE_ONLY_PROPERTY_EDITOR_VALUE_TYPE } from '../value-type/constants.js';
+export const manifests = [
+    {
+        type: 'valueSummary',
+        kind: 'default',
+        alias: 'Umb.ValueSummary.PropertyEditor.DateOnly',
+        name: 'Date Only Property Editor Value Summary',
+        forValueType: UMB_DATE_ONLY_PROPERTY_EDITOR_VALUE_TYPE,
+        element: () => import('../../date-time-value-summary.element.js'),
+    },
+];