Moved the private ColumnConfig interface

to be a public export `UmbCollectionColumnConfiguration`.

src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts

@@ -1,17 +1,17 @@
-import type { UmbCollectionConfiguration, UmbCollectionContext } from '../types.js';
+import type { UmbCollectionColumnConfiguration, UmbCollectionConfiguration, UmbCollectionContext } from '../types.js';
 import { UmbCollectionViewManager } from '../collection-view.manager.js';
-import type { UmbCollectionRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbArrayState, UmbNumberState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
-import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
-import type { ManifestCollection, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import type { UmbCollectionFilterModel } from '@umbraco-cms/backoffice/collection';
 import { UmbSelectionManager, UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import type { ManifestCollection, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbCollectionFilterModel } from '@umbraco-cms/backoffice/collection';
+import type { UmbCollectionRepository } from '@umbraco-cms/backoffice/repository';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbDefaultCollectionContext<
 		CollectionItemType = any,
@@ -31,7 +31,7 @@ export class UmbDefaultCollectionContext<
 	#filter = new UmbObjectState<FilterModelType | object>({});
 	public readonly filter = this.#filter.asObservable();
 
-	#userDefinedProperties = new UmbArrayState<any>([], (x) => x);
+	#userDefinedProperties = new UmbArrayState<UmbCollectionColumnConfiguration>([], (x) => x);
 	public readonly userDefinedProperties = this.#userDefinedProperties.asObservable();
 
 	repository?: UmbCollectionRepository;

src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts

@@ -18,7 +18,17 @@ export interface UmbCollectionConfiguration {
 	orderDirection?: string;
 	pageSize?: number;
 	useInfiniteEditor?: boolean;
-	userDefinedProperties?: Array<any>;
+	userDefinedProperties?: Array<UmbCollectionColumnConfiguration>;
+}
+
+export interface UmbCollectionColumnConfiguration {
+	alias: string;
+	header: string;
+	// TODO: [LK] Figure out why the server API needs an int (1|0) instead of a boolean.
+	isSystem: 1 | 0;
+	elementName?: string;
+	// TODO: [LK] Remove `nameTemplate`, to be replaced with `elementName`.
+	nameTemplate?: string;
 }
 
 export interface UmbCollectionContext {

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

@@ -1,18 +1,12 @@
+import type { UmbCollectionColumnConfiguration } from '../../../../../../core/collection/types.js';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { html, customElement, property, repeat, css, query, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, repeat, css, query } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIInputEvent, UUISelectElement } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
-interface ColumnConfig {
-	alias: string;
-	header: string;
-	isSystem: 1 | 0;
-	nameTemplate?: string;
-}
-
 /**
  * @element umb-property-editor-ui-collection-view-column-configuration
  */
@@ -22,7 +16,7 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 	implements UmbPropertyEditorUiElement
 {
 	@property({ type: Array })
-	value: Array<ColumnConfig> = [];
+	value: Array<UmbCollectionColumnConfiguration> = [];
 
 	@property({ type: Object, attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
@@ -74,18 +68,19 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 			this._selectEl.error = false;
 		}
 
-		const config: ColumnConfig = {
+		const config: UmbCollectionColumnConfiguration = {
 			alias: selected.value,
 			header: selected.name,
 			isSystem: selected?.group === 'System Fields' ? 1 : 0,
 		};
+
 		this.value = [...this.value, config];
 
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	#onRemove(unique: string) {
-		const newValue: Array<ColumnConfig> = [];
+		const newValue: Array<UmbCollectionColumnConfiguration> = [];
 		this.value.forEach((config) => {
 			if (config.alias !== unique) newValue.push(config);
 		});
@@ -93,17 +88,17 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	#onHeaderChange(e: UUIInputEvent, configuration: ColumnConfig) {
+	#onHeaderChange(e: UUIInputEvent, configuration: UmbCollectionColumnConfiguration) {
 		this.value = this.value.map(
-			(config): ColumnConfig =>
+			(config): UmbCollectionColumnConfiguration =>
 				config.alias === configuration.alias ? { ...config, header: e.target.value as string } : config,
 		);
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	#onTemplateChange(e: UUIInputEvent, configuration: ColumnConfig) {
+	#onTemplateChange(e: UUIInputEvent, configuration: UmbCollectionColumnConfiguration) {
 		this.value = this.value.map(
-			(config): ColumnConfig =>
+			(config): UmbCollectionColumnConfiguration =>
 				config.alias === configuration.alias ? { ...config, nameTemplate: e.target.value as string } : config,
 		);
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -141,12 +136,12 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 								>Remove</uui-button
 							>
 						</uui-table-cell>
-					</uui-table-row> `,
+					</uui-table-row>`,
 			)}
 		</uui-table>`;
 	}
 
-	#renderSystemFieldRow(configuration: ColumnConfig) {
+	#renderSystemFieldRow(configuration: UmbCollectionColumnConfiguration) {
 		return html`
 			<uui-table-cell><strong>${configuration.alias}</strong><small>(system field)</small></uui-table-cell>
 			<uui-table-cell>${configuration.header}</uui-table-cell>
@@ -154,7 +149,7 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 		`;
 	}
 
-	#renderCustomFieldRow(configuration: ColumnConfig) {
+	#renderCustomFieldRow(configuration: UmbCollectionColumnConfiguration) {
 		return html`
 			<uui-table-cell><strong>${configuration.alias}</strong></uui-table-cell>
 			<uui-table-cell>