@umbraco-cms/backoffice 14.0.0-rc2 → 14.0.0-rc4

package/dist-cms/packages/{core/components/input-content-type-property/input-content-type-property.element.js → property-editors/collection/config/column/components/input-collection-content-type-property.element.js}

@@ -4,34 +4,23 @@ 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;
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _UmbInputContentTypePropertyElement_instances, _UmbInputContentTypePropertyElement_configuration, _UmbInputContentTypePropertyElement_modalManager, _UmbInputContentTypePropertyElement_onClick, _UmbInputContentTypePropertyElement_openContentTypePicker, _UmbInputContentTypePropertyElement_openPropertyPicker;
-import { html, customElement, property, css } from '../../../../external/lit/index.js';
-import { UUIFormControlMixin } from '../../../../external/uui/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
-import { UmbChangeEvent, UmbSelectionChangeEvent } from '../../event/index.js';
-import { UmbMediaTypeDetailRepository, UMB_MEDIA_TYPE_PICKER_MODAL } from '../../../media/media-types/index.js';
-import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UmbDocumentTypeDetailRepository } from '../../../documents/document-types/index.js';
-import { UMB_MEMBER_TYPE_PICKER_MODAL, UmbMemberTypeDetailRepository } from '../../../members/member-type/index.js';
-import { UMB_ITEM_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../modal/index.js';
-let UmbInputContentTypePropertyElement = class UmbInputContentTypePropertyElement extends UUIFormControlMixin(UmbLitElement, undefined) {
+import { html, customElement, property, css } from '../../../../../../external/lit/index.js';
+import { UUIFormControlMixin } from '../../../../../../external/uui/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbChangeEvent, UmbSelectionChangeEvent } from '../../../../../core/event/index.js';
+import { UmbMediaTypeDetailRepository, UMB_MEDIA_TYPE_PICKER_MODAL } from '../../../../../media/media-types/index.js';
+import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UmbDocumentTypeDetailRepository } from '../../../../../documents/document-types/index.js';
+import { UMB_MEMBER_TYPE_PICKER_MODAL, UmbMemberTypeDetailRepository } from '../../../../../members/member-type/index.js';
+import { UMB_ITEM_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../../../../core/modal/index.js';
+let UmbInputCollectionContentTypePropertyElement = class UmbInputCollectionContentTypePropertyElement extends UUIFormControlMixin(UmbLitElement, undefined) {
+    #configuration;
+    #modalManager;
     getFormElement() {
         return undefined;
     }
     constructor() {
         super();
-        _UmbInputContentTypePropertyElement_instances.add(this);
-        _UmbInputContentTypePropertyElement_configuration.set(this, {
+        this.#configuration = {
             documentTypes: {
                 item: {
                     label: this.localize.term('content_documentType'),
@@ -55,7 +44,12 @@ let UmbInputContentTypePropertyElement = class UmbInputContentTypePropertyElemen
                         value: 'createDate',
                         icon: 'icon-settings',
                     },
-                    { label: this.localize.term('content_createBy'), description: 'owner', value: 'owner', icon: 'icon-settings' },
+                    {
+                        label: this.localize.term('content_createBy'),
+                        description: 'creator',
+                        value: 'creator',
+                        icon: 'icon-settings',
+                    },
                     {
                         label: this.localize.term('content_isPublished'),
                         description: 'published',
@@ -122,7 +116,12 @@ let UmbInputContentTypePropertyElement = class UmbInputContentTypePropertyElemen
                         value: 'createDate',
                         icon: 'icon-settings',
                     },
-                    { label: this.localize.term('content_createBy'), description: 'owner', value: 'owner', icon: 'icon-settings' },
+                    {
+                        label: this.localize.term('content_createBy'),
+                        description: 'creator',
+                        value: 'creator',
+                        icon: 'icon-settings',
+                    },
                     {
                         label: this.localize.term('general_sort'),
                         description: 'sortOrder',
@@ -180,136 +179,132 @@ let UmbInputContentTypePropertyElement = class UmbInputContentTypePropertyElemen
                     },
                 ],
             },
-        });
-        _UmbInputContentTypePropertyElement_modalManager.set(this, void 0);
+        };
         this.documentTypes = false;
         this.elementTypes = false;
         this.mediaTypes = false;
         this.memberTypes = false;
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (modalManager) => {
-            __classPrivateFieldSet(this, _UmbInputContentTypePropertyElement_modalManager, modalManager, "f");
+            this.#modalManager = modalManager;
+        });
+    }
+    async #onClick() {
+        const items = [];
+        if (this.documentTypes) {
+            items.push(this.#configuration['documentTypes'].item);
+        }
+        if (this.elementTypes) {
+            items.push(this.#configuration['elementTypes'].item);
+        }
+        if (this.mediaTypes) {
+            items.push(this.#configuration['mediaTypes'].item);
+        }
+        if (this.memberTypes) {
+            items.push(this.#configuration['memberTypes'].item);
+        }
+        if (items.length === 1) {
+            // If there is only one item, we can skip the modal and go directly to the picker.
+            this.#openContentTypePicker(items[0].value);
+            return;
+        }
+        if (!this.#modalManager)
+            return;
+        const modalContext = this.#modalManager.open(this, UMB_ITEM_PICKER_MODAL, {
+            data: {
+                headline: this.localize.term('defaultdialogs_selectContentType'),
+                items: items,
+            },
+        });
+        const modalValue = await modalContext.onSubmit();
+        if (!modalValue)
+            return;
+        const configKey = modalValue.value;
+        this.#openContentTypePicker(configKey);
+    }
+    async #openContentTypePicker(configKey) {
+        const config = this.#configuration[configKey];
+        if (!config)
+            return;
+        const pickerModal = config.pickerModal();
+        const pickerContext = this.#modalManager?.open(this, pickerModal, {
+            data: {
+                hideTreeRoot: true,
+                multiple: false,
+                pickableFilter: config.pickableFilter,
+            },
+        });
+        // NOTE: We listen for the selection change event to submit the picker.
+        // This is to enforce a single selection and progress to the next modal.
+        pickerContext?.addEventListener(UmbSelectionChangeEvent.TYPE, pickerContext.submit);
+        const pickerValue = await pickerContext?.onSubmit();
+        const selectedItems = pickerValue?.selection ?? [];
+        if (selectedItems.length === 0)
+            return;
+        const repository = config.repository();
+        const { data } = await repository.requestByUnique(selectedItems[0] ?? '');
+        if (!data)
+            return;
+        this.#openPropertyPicker(data, config);
+    }
+    async #openPropertyPicker(contentType, config) {
+        if (!contentType)
+            return;
+        if (!this.#modalManager)
+            return;
+        const properties = contentType?.properties.map((property) => ({
+            label: property.name,
+            value: property.alias,
+            description: property.alias,
+            icon: config.item.icon,
+        })) ?? [];
+        const items = [...(config.systemProperties ?? []), ...properties];
+        const modalContext = this.#modalManager.open(this, UMB_ITEM_PICKER_MODAL, {
+            data: {
+                headline: `Select a property from ${contentType.name}`,
+                items: items,
+            },
         });
+        const modalValue = await modalContext.onSubmit();
+        if (!modalValue)
+            return;
+        this.selectedProperty = {
+            label: modalValue.label,
+            alias: modalValue.value,
+            isSystem: config.systemProperties?.some((property) => property.value === modalValue.value) ?? false,
+        };
+        this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `<uui-button
 			label=${this.localize.term('general_choose')}
 			look="placeholder"
 			color="default"
-			@click=${__classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_instances, "m", _UmbInputContentTypePropertyElement_onClick)}></uui-button>`;
-    }
-};
-_UmbInputContentTypePropertyElement_configuration = new WeakMap();
-_UmbInputContentTypePropertyElement_modalManager = new WeakMap();
-_UmbInputContentTypePropertyElement_instances = new WeakSet();
-_UmbInputContentTypePropertyElement_onClick = async function _UmbInputContentTypePropertyElement_onClick() {
-    const items = [];
-    if (this.documentTypes) {
-        items.push(__classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_configuration, "f")['documentTypes'].item);
-    }
-    if (this.elementTypes) {
-        items.push(__classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_configuration, "f")['elementTypes'].item);
+			@click=${this.#onClick}></uui-button>`;
     }
-    if (this.mediaTypes) {
-        items.push(__classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_configuration, "f")['mediaTypes'].item);
-    }
-    if (this.memberTypes) {
-        items.push(__classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_configuration, "f")['memberTypes'].item);
-    }
-    if (items.length === 1) {
-        // If there is only one item, we can skip the modal and go directly to the picker.
-        __classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_instances, "m", _UmbInputContentTypePropertyElement_openContentTypePicker).call(this, items[0].value);
-        return;
-    }
-    if (!__classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_modalManager, "f"))
-        return;
-    const modalContext = __classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_modalManager, "f").open(this, UMB_ITEM_PICKER_MODAL, {
-        data: {
-            headline: this.localize.term('defaultdialogs_selectContentType'),
-            items: items,
-        },
-    });
-    const modalValue = await modalContext.onSubmit();
-    if (!modalValue)
-        return;
-    const configKey = modalValue.value;
-    __classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_instances, "m", _UmbInputContentTypePropertyElement_openContentTypePicker).call(this, configKey);
-};
-_UmbInputContentTypePropertyElement_openContentTypePicker = async function _UmbInputContentTypePropertyElement_openContentTypePicker(configKey) {
-    const config = __classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_configuration, "f")[configKey];
-    if (!config)
-        return;
-    const pickerModal = config.pickerModal();
-    const pickerContext = __classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_modalManager, "f")?.open(this, pickerModal, {
-        data: {
-            hideTreeRoot: true,
-            multiple: false,
-            pickableFilter: config.pickableFilter,
-        },
-    });
-    // NOTE: We listen for the selection change event to submit the picker.
-    // This is to enforce a single selection and progress to the next modal.
-    pickerContext?.addEventListener(UmbSelectionChangeEvent.TYPE, pickerContext.submit);
-    const pickerValue = await pickerContext?.onSubmit();
-    const selectedItems = pickerValue?.selection ?? [];
-    if (selectedItems.length === 0)
-        return;
-    const repository = config.repository();
-    const { data } = await repository.requestByUnique(selectedItems[0] ?? '');
-    if (!data)
-        return;
-    __classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_instances, "m", _UmbInputContentTypePropertyElement_openPropertyPicker).call(this, data, config);
-};
-_UmbInputContentTypePropertyElement_openPropertyPicker = async function _UmbInputContentTypePropertyElement_openPropertyPicker(contentType, config) {
-    if (!contentType)
-        return;
-    if (!__classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_modalManager, "f"))
-        return;
-    const properties = contentType?.properties.map((property) => ({
-        label: property.name,
-        value: property.alias,
-        description: property.alias,
-        icon: config.item.icon,
-    })) ?? [];
-    const items = [...(config.systemProperties ?? []), ...properties];
-    const modalContext = __classPrivateFieldGet(this, _UmbInputContentTypePropertyElement_modalManager, "f").open(this, UMB_ITEM_PICKER_MODAL, {
-        data: {
-            headline: `Select a property from ${contentType.name}`,
-            items: items,
-        },
-    });
-    const modalValue = await modalContext.onSubmit();
-    if (!modalValue)
-        return;
-    this.selectedProperty = {
-        label: modalValue.label,
-        alias: modalValue.value,
-        isSystem: config.systemProperties?.some((property) => property.value === modalValue.value) ?? false,
-    };
-    this.dispatchEvent(new UmbChangeEvent());
-};
-UmbInputContentTypePropertyElement.styles = [
-    css `
+    static { this.styles = [
+        css `
 			:host {
 				display: flex;
 				flex-direction: column;
 				gap: var(--uui-size-space-1);
 			}
 		`,
-];
+    ]; }
+};
 __decorate([
     property({ type: Boolean, attribute: 'document-types' })
-], UmbInputContentTypePropertyElement.prototype, "documentTypes", void 0);
+], UmbInputCollectionContentTypePropertyElement.prototype, "documentTypes", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'element-types' })
-], UmbInputContentTypePropertyElement.prototype, "elementTypes", void 0);
+], UmbInputCollectionContentTypePropertyElement.prototype, "elementTypes", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'media-types' })
-], UmbInputContentTypePropertyElement.prototype, "mediaTypes", void 0);
+], UmbInputCollectionContentTypePropertyElement.prototype, "mediaTypes", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'member-types' })
-], UmbInputContentTypePropertyElement.prototype, "memberTypes", void 0);
-UmbInputContentTypePropertyElement = __decorate([
-    customElement('umb-input-content-type-property')
-], UmbInputContentTypePropertyElement);
-export { UmbInputContentTypePropertyElement };
-export default UmbInputContentTypePropertyElement;
+], UmbInputCollectionContentTypePropertyElement.prototype, "memberTypes", void 0);
+UmbInputCollectionContentTypePropertyElement = __decorate([
+    customElement('umb-input-collection-content-type-property')
+], UmbInputCollectionContentTypePropertyElement);
+export { UmbInputCollectionContentTypePropertyElement };
+export default UmbInputCollectionContentTypePropertyElement;

package/dist-cms/packages/property-editors/{collection-view → collection}/config/column/manifests.js

@@ -1,10 +1,10 @@
 export const manifest = {
     type: 'propertyEditorUi',
-    alias: 'Umb.PropertyEditorUi.CollectionView.ColumnConfiguration',
-    name: 'Collection View Column Configuration Property Editor UI',
+    alias: 'Umb.PropertyEditorUi.Collection.ColumnConfiguration',
+    name: 'Collection Column Configuration Property Editor UI',
     element: () => import('./column-configuration.element.js'),
     meta: {
-        label: 'Collection View Column Configuration',
+        label: 'Collection Column Configuration',
         icon: 'icon-autofill',
         group: 'lists',
     },

package/dist-cms/packages/property-editors/{collection-view → collection}/config/layout/layout-configuration.element.d.ts

@@ -9,19 +9,19 @@ interface UmbCollectionLayoutConfiguration {
     selected?: boolean;
 }
 /**
- * @element umb-property-editor-ui-collection-view-layout-configuration
+ * @element umb-property-editor-ui-collection-layout-configuration
  */
-export declare class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUICollectionLayoutConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
-    set value(value: Array<UmbCollectionLayoutConfiguration>);
+    set value(value: Array<UmbCollectionLayoutConfiguration> | undefined);
     get value(): Array<UmbCollectionLayoutConfiguration>;
     config?: UmbPropertyEditorConfigCollection;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
-export default UmbPropertyEditorUICollectionViewLayoutConfigurationElement;
+export default UmbPropertyEditorUICollectionLayoutConfigurationElement;
 declare global {
     interface HTMLElementTagNameMap {
-        'umb-property-editor-ui-collection-view-layout-configuration': UmbPropertyEditorUICollectionViewLayoutConfigurationElement;
+        'umb-property-editor-ui-collection-layout-configuration': UmbPropertyEditorUICollectionLayoutConfigurationElement;
     }
 }

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

@@ -0,0 +1,188 @@
+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 { css, customElement, html, ifDefined, nothing, property, repeat, 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 { UmbPropertyValueChangeEvent } from '../../../../core/property-editor/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UmbTextStyles } from '../../../../core/style/index.js';
+import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../../../core/modal/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 UmbPropertyValueChangeEvent());
+        },
+    });
+    set value(value) {
+        this.#value = value ?? [];
+        this.#sorter.setModel(this.#value);
+    }
+    get value() {
+        return this.#value;
+    }
+    #value = [];
+    async #focusNewItem() {
+        await this.updateComplete;
+        const input = this.shadowRoot?.querySelector('.layout-item:last-of-type > uui-input');
+        input.focus();
+    }
+    #onAdd(event) {
+        const manifest = event.target.value;
+        const duplicate = this.value?.find((config) => manifest?.value === config.collectionView);
+        if (duplicate) {
+            // TODO: Show error to user, can not add duplicate `collectionView` aliases. [LK]
+            throw new Error('Duplicate `collectionView` aliases are not allowed.');
+            return;
+        }
+        this.value = [
+            ...(this.value ?? []),
+            {
+                icon: manifest?.icon,
+                name: manifest?.label,
+                collectionView: manifest?.value,
+            },
+        ];
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.#focusNewItem();
+    }
+    #onChangeLabel(e, index) {
+        const values = [...(this.value ?? [])];
+        values[index] = { ...values[index], name: e.target.value };
+        this.value = values;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    #onRemove(unique) {
+        const values = [...(this.value ?? [])];
+        values.splice(unique, 1);
+        this.value = values;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    async #onIconChange(icon, index) {
+        const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+        const modal = modalManager.open(this, UMB_ICON_PICKER_MODAL, { value: icon });
+        const picked = await modal?.onSubmit();
+        if (!picked)
+            return;
+        const values = [...(this.value ?? [])];
+        values[index] = { ...values[index], icon: `${picked.icon} color-${picked.color}` };
+        this.value = values;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    #parseIcon(iconString) {
+        const [icon, color] = iconString?.split(' ') ?? [];
+        return { icon, color: color?.replace('color-', '') };
+    }
+    #getUnique(layout) {
+        return 'x' + simpleHashCode('' + layout.collectionView + layout.name + layout.icon).toString(16);
+    }
+    render() {
+        return html `
+			<div id="layout-wrapper">${this.#renderLayouts()}</div>
+			${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 name="icon-navigation"></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">
+					<uui-button
+						label=${this.localize.term('general_remove')}
+						look="secondary"
+						@click=${() => this.#onRemove(index)}></uui-button>
+				</div>
+			</div>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			#layout-wrapper {
+				display: flex;
+				flex-direction: column;
+				gap: 1px;
+				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;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Array })
+], UmbPropertyEditorUICollectionLayoutConfigurationElement.prototype, "value", null);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbPropertyEditorUICollectionLayoutConfigurationElement.prototype, "config", void 0);
+UmbPropertyEditorUICollectionLayoutConfigurationElement = __decorate([
+    customElement('umb-property-editor-ui-collection-layout-configuration')
+], UmbPropertyEditorUICollectionLayoutConfigurationElement);
+export { UmbPropertyEditorUICollectionLayoutConfigurationElement };
+export default UmbPropertyEditorUICollectionLayoutConfigurationElement;

package/dist-cms/packages/property-editors/{collection-view → collection}/config/layout/manifests.js

@@ -1,10 +1,10 @@
 export const manifest = {
     type: 'propertyEditorUi',
-    alias: 'Umb.PropertyEditorUi.CollectionView.LayoutConfiguration',
-    name: 'Collection View Column Configuration Property Editor UI',
+    alias: 'Umb.PropertyEditorUi.Collection.LayoutConfiguration',
+    name: 'Collection Column Configuration Property Editor UI',
     element: () => import('./layout-configuration.element.js'),
     meta: {
-        label: 'Collection View Layout Configuration',
+        label: 'Collection Layout Configuration',
         icon: 'icon-autofill',
         group: 'lists',
     },

package/dist-cms/packages/property-editors/{collection-view → collection}/config/order-by/manifests.js

@@ -1,10 +1,10 @@
 export const manifest = {
     type: 'propertyEditorUi',
-    alias: 'Umb.PropertyEditorUi.CollectionView.OrderBy',
-    name: 'Collection View Column Configuration Property Editor UI',
+    alias: 'Umb.PropertyEditorUi.Collection.OrderBy',
+    name: 'Collection Column Configuration Property Editor UI',
     element: () => import('./order-by.element.js'),
     meta: {
-        label: 'Collection View Order By',
+        label: 'Collection Order By',
         icon: 'icon-autofill',
         group: 'lists',
     },

package/dist-cms/packages/property-editors/collection/config/order-by/order-by.element.d.ts

@@ -0,0 +1,20 @@
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import type { UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
+/**
+ * @element umb-property-editor-ui-collection-order-by
+ */
+export declare class UmbPropertyEditorUICollectionOrderByElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    value: string;
+    config?: UmbPropertyEditorConfigCollection;
+    private _options;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default UmbPropertyEditorUICollectionOrderByElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-collection-order-by': UmbPropertyEditorUICollectionOrderByElement;
+    }
+}

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

@@ -0,0 +1,52 @@
+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, html, property, state } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbPropertyValueChangeEvent } from '../../../../core/property-editor/index.js';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
+/**
+ * @element umb-property-editor-ui-collection-order-by
+ */
+let UmbPropertyEditorUICollectionOrderByElement = class UmbPropertyEditorUICollectionOrderByElement extends UmbLitElement {
+    constructor() {
+        super();
+        this.value = '';
+        this._options = [];
+        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => {
+            const workspace = instance;
+            this.observe(await workspace.propertyValueByAlias('includeProperties'), (includeProperties) => {
+                if (!includeProperties)
+                    return;
+                this._options = includeProperties.map((property) => ({
+                    name: property.header,
+                    value: property.alias,
+                    selected: property.alias === this.value,
+                }));
+            }, '_observeIncludeProperties');
+        });
+    }
+    #onChange(e) {
+        this.value = e.target.value;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    render() {
+        if (!this._options.length)
+            return html `<p><em>Add a column (above) to order by.</em></p>`;
+        return html `<uui-select label="select" .options=${this._options} @change=${this.#onChange}></uui-select>`;
+    }
+};
+__decorate([
+    property()
+], UmbPropertyEditorUICollectionOrderByElement.prototype, "value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUICollectionOrderByElement.prototype, "_options", void 0);
+UmbPropertyEditorUICollectionOrderByElement = __decorate([
+    customElement('umb-property-editor-ui-collection-order-by')
+], UmbPropertyEditorUICollectionOrderByElement);
+export { UmbPropertyEditorUICollectionOrderByElement };
+export default UmbPropertyEditorUICollectionOrderByElement;