UmbDataTypeConfig type

.eslintignore

@@ -1,5 +1,5 @@
 .eslintrc.js
-types
+/types
 dist
 dist-cms
 schemas

.gitignore

@@ -11,7 +11,7 @@ node_modules
 dist
 dist-cms
 dist-ssr
-types
+/types
 *.tsbuildinfo
 *.local
 *.tgz

src/libs/observable-api/class-state.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs';
 
 interface UmbClassStateData {
-	equal(otherClass: UmbClassStateData): boolean;
+	equal(otherClass: UmbClassStateData | undefined): boolean;
 }
 
 /**
@@ -10,7 +10,7 @@ interface UmbClassStateData {
  * @extends {BehaviorSubject<T>}
  * @description - A RxJS BehaviorSubject which can hold class instance which has a equal method to compare in coming instances for changes.
  */
-export class UmbClassState<T extends UmbClassStateData | undefined | null> extends BehaviorSubject<T> {
+export class UmbClassState<T extends UmbClassStateData | undefined> extends BehaviorSubject<T> {
 	constructor(initialData: T) {
 		super(initialData);
 	}

src/packages/core/components/data-type/data-type-property-collection.class.ts

@@ -1,11 +1,12 @@
+import { type UmbDataTypeConfigProperty, type UmbDataTypeConfig } from '../../property-editors/index.js';
 import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 
 /**
  * Extends Array to add utility functions for accessing data type properties
  * by alias, returning either the value or the complete DataTypePropertyPresentationModel object
  */
-export class UmbDataTypePropertyCollection extends Array<DataTypePropertyPresentationModel> {
-	constructor(args: Array<DataTypePropertyPresentationModel> = []) {
+export class UmbDataTypeConfigCollection extends Array<UmbDataTypeConfigProperty> {
+	constructor(args: UmbDataTypeConfig) {
 		super(...args);
 	}
 	static get [Symbol.species](): ArrayConstructor {
@@ -43,4 +44,15 @@ export class UmbDataTypePropertyCollection extends Array<DataTypePropertyPresent
 	toObject(): Record<string, unknown> {
 		return Object.fromEntries(this.map((x) => [x.alias, x.value]));
 	}
+
+	equal(other: UmbDataTypeConfigCollection | undefined): boolean {
+		if (this.length !== other?.length) {
+			return false;
+		}
+
+		return this.every((x) => {
+			const otherProperty = x.alias ? other.getByAlias(x.alias!) : undefined;
+			return otherProperty && x.value === otherProperty.value;
+		});
+	}
 }

src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts

@@ -7,7 +7,7 @@ import { renderEditor, type tinymce } from '@umbraco-cms/backoffice/external/tin
 import { UMB_AUTH, UmbLoggedInUser } from '@umbraco-cms/backoffice/auth';
 import {
 	TinyMcePluginArguments,
-	UmbDataTypePropertyCollection,
+	UmbDataTypeConfigCollection,
 	UmbTinyMcePluginBase,
 } from '@umbraco-cms/backoffice/components';
 import { ClassConstructor, hasDefaultExport, loadExtension } from '@umbraco-cms/backoffice/extension-api';
@@ -29,8 +29,8 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 // TODO => integrate macro picker, update stylesheet fetch when backend CLI exists (ref tinymce.service.js in existing backoffice)
 @customElement('umb-input-tiny-mce')
 export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
-	@property({ type: Object })
-	configuration?: UmbDataTypePropertyCollection;
+	@property({ attribute: false })
+	configuration?: UmbDataTypeConfigCollection;
 
 	@state()
 	private _tinyConfig: tinymce.RawEditorOptions = {};
@@ -43,7 +43,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 	#editorRef?: tinymce.Editor | null = null;
 
 	protected getFormElement() {
-		return undefined;
+		return this._editorElement?.querySelector('iframe') ?? undefined;
 	}
 
 	@query('#editor', true)
@@ -80,6 +80,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 		super.disconnectedCallback();
 
 		if (this.#editorRef) {
+			// TODO: Test if there is any problems with destroying the RTE here, but not initializing on connectedCallback. (firstUpdated is only called first time the element is rendered, not when it is reconnected)
 			this.#editorRef.destroy();
 		}
 	}
@@ -104,6 +105,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 
 	async #setTinyConfig() {
 		// create an object by merging the configuration onto the fallback config
+		// TODO: Seems like a too tight coupling between DataTypeConfigCollection and TinyMceConfig, I would love it begin more explicit what we take from DataTypeConfigCollection and parse on, but I understand that this gives some flexibility. Is this flexibility on purpose?
 		const configurationOptions: Record<string, any> = {
 			...defaultFallbackConfig,
 			...(this.configuration ? this.configuration?.toObject() : {}),
@@ -203,7 +205,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 		// Plugins require a reference to the current editor as a param, so can not
 		// be instantiated until we have an editor
 		for (const plugin of this.#plugins) {
-			new plugin({ host: this, editor });			
+			new plugin({ host: this, editor });
 		}
 
 		// define keyboard shortcuts

src/packages/core/components/input-tiny-mce/tiny-mce-plugin.ts

@@ -1,10 +1,10 @@
-import type { UmbDataTypePropertyCollection, UmbInputTinyMceElement } from '@umbraco-cms/backoffice/components';
+import type { UmbDataTypeConfigCollection, UmbInputTinyMceElement } from '@umbraco-cms/backoffice/components';
 import type { tinymce } from '@umbraco-cms/backoffice/external/tinymce';
 
 export class UmbTinyMcePluginBase {
 	host: UmbInputTinyMceElement;
 	editor: tinymce.Editor;
-	configuration?: UmbDataTypePropertyCollection;
+	configuration?: UmbDataTypeConfigCollection;
 
 	constructor(arg: TinyMcePluginArguments) {
 		this.host = arg.host;

src/packages/core/components/property-type-based-property/property-type-based-property.element.ts

@@ -1,13 +1,10 @@
+import { UmbDataTypeConfig, type UmbDataTypeConfigProperty } from '../../property-editors/index.js';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import { css, html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbDataTypeRepository } from '@umbraco-cms/backoffice/data-type';
 import { UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document';
 import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
-import type {
-	DataTypeResponseModel,
-	DataTypePropertyPresentationModel,
-	PropertyTypeModelBaseModel,
-} from '@umbraco-cms/backoffice/backend-api';
+import type { DataTypeResponseModel, PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
@@ -32,7 +29,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 	private _propertyEditorUiAlias?: string;
 
 	@state()
-	private _dataTypeData: DataTypePropertyPresentationModel[] = [];
+	private _dataTypeData?: UmbDataTypeConfig;
 
 	private _dataTypeRepository: UmbDataTypeRepository = new UmbDataTypeRepository(this);
 	private _dataTypeObserver?: UmbObserverController<DataTypeResponseModel | undefined>;
@@ -92,7 +89,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 			this._dataTypeObserver = this.observe(
 				await this._dataTypeRepository.byId(dataTypeId),
 				(dataType) => {
-					this._dataTypeData = dataType?.values || [];
+					this._dataTypeData = dataType?.values;
 					this._propertyEditorUiAlias = dataType?.propertyEditorUiAlias || undefined;
 					// If there is no UI, we will look up the Property editor model to find the default UI alias:
 					if (!this._propertyEditorUiAlias && dataType?.propertyEditorAlias) {

src/packages/core/extension-registry/interfaces/property-editor-ui-extension-element.interface.ts

@@ -1,6 +1,6 @@
-import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components';
+import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components';
 
 export interface UmbPropertyEditorExtensionElement extends HTMLElement {
 	value: unknown;
-	config?: UmbDataTypePropertyCollection;
+	config?: UmbDataTypeConfigCollection;
 }

src/packages/core/extension-registry/models/property-editor.model.ts

@@ -1,5 +1,5 @@
 import type { UmbPropertyEditorExtensionElement } from '../interfaces/index.js';
-import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { type UmbDataTypeConfig } from '../../property-editors/index.js';
 import type { ManifestElement, ManifestBase } from '@umbraco-cms/backoffice/extension-api';
 
 export interface ManifestPropertyEditorUi extends ManifestElement<UmbPropertyEditorExtensionElement> {
@@ -39,7 +39,7 @@ export interface PropertyEditorConfigProperty {
 	description?: string;
 	alias: string;
 	propertyEditorUiAlias: string;
-	config?: Array<DataTypePropertyPresentationModel>;
+	config?: UmbDataTypeConfig;
 }
 
 export interface PropertyEditorConfigDefaultData {

src/packages/core/property-actions/shared/property-action-menu/property-action-menu.element.ts

@@ -10,9 +10,8 @@ import '../property-action/property-action.element.js';
 
 @customElement('umb-property-action-menu')
 export class UmbPropertyActionMenuElement extends UmbLitElement {
-	// TODO: we need to investigate context api vs values props and events
-	@property()
-	public value?: string;
+	@property({ attribute: false })
+	public value?: unknown;
 
 	@property()
 	set propertyEditorUiAlias(alias: string) {

src/packages/core/property-actions/shared/property-action/property-action.element.ts

@@ -5,6 +5,7 @@ import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api';
 
 import type { ManifestPropertyAction } from '@umbraco-cms/backoffice/extension-registry';
 
+// TODO: Here is a problem. The UmbPropertyActionElement is used for the type of the Extension Element. But is also a component that renders the Extension Element...
 @customElement('umb-property-action')
 export class UmbPropertyActionElement extends LitElement implements UmbPropertyAction {
 	private _propertyAction?: ManifestPropertyAction;
@@ -18,8 +19,8 @@ export class UmbPropertyActionElement extends LitElement implements UmbPropertyA
 	}
 
 	// TODO: we need to investigate context api vs values props and events
-	@property()
-	public value?: string;
+	@property({ attribute: false })
+	public value?: unknown;
 
 	@state()
 	private _element?: UmbPropertyActionElement;
@@ -28,6 +29,7 @@ export class UmbPropertyActionElement extends LitElement implements UmbPropertyA
 		if (!this.propertyAction) return;
 
 		try {
+			// TODO: Here is a problem. The UmbPropertyActionElement is used for the type of the Extension Element. But is also a component that renders the Extension Element...
 			this._element = (await createExtensionElement(this.propertyAction)) as UmbPropertyActionElement | undefined;
 			if (!this._element) return;
 

src/packages/core/property-actions/shared/property-action/property-action.model.ts

@@ -1,3 +1,3 @@
 export interface UmbPropertyAction extends HTMLElement {
-	value?: string;
+	value?: unknown;
 }

src/packages/core/property-editors/events/index.ts

@@ -0,0 +1 @@
+export * from './property-value-change.event';

src/packages/core/property-editors/events/property-value-change.event.ts

@@ -0,0 +1,6 @@
+export class UmbPropertyValueChangeEvent extends Event {
+	public constructor() {
+		// mimics the native change event
+		super('property-value-change', { bubbles: true, composed: false, cancelable: false });
+	}
+}

src/packages/core/property-editors/index.ts

@@ -1,6 +1,2 @@
-export class UmbPropertyValueChangeEvent extends Event {
-	public constructor() {
-		// mimics the native change event
-		super('property-value-change', { bubbles: true, composed: false, cancelable: false });
-	}
-}
+export * from './types';
+export * from './events';

src/packages/core/property-editors/manifests.ts

@@ -1,4 +1,4 @@
-import { manifests as propertyEditorSchemaManifests } from './models/manifests.js';
+import { manifests as propertyEditorSchemaManifests } from './schemas/manifests.js';
 import { manifests as propertyEditorUIManifests } from './uis/manifests.js';
 
 export const manifests = [...propertyEditorSchemaManifests, ...propertyEditorUIManifests];

src/packages/core/property-editors/types/data-type-config.type.ts

@@ -0,0 +1,4 @@
+import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+
+export type UmbDataTypeConfigProperty = DataTypePropertyPresentationModel;
+export type UmbDataTypeConfig = UmbDataTypeConfigProperty[];

src/packages/core/property-editors/types/index.ts

@@ -0,0 +1 @@
+export * from './data-type-config.type';

src/packages/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts

@@ -6,7 +6,7 @@ import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components';
+import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-block-grid
@@ -18,8 +18,8 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 	@property()
 	value = '';
 
-	@property({ type: Array, attribute: false })
-	public config?: UmbDataTypePropertyCollection;
+	@property({ attribute: false })
+	public config?: UmbDataTypeConfigCollection;
 
 	@state()
 	private _routes: UmbRoute[] = [];

src/packages/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts

@@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components';
+import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-block-list
@@ -12,8 +12,8 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 	@property()
 	value = '';
 
-	@property({ type: Array, attribute: false })
-	public config?: UmbDataTypePropertyCollection;
+	@property({ attribute: false })
+	public config?: UmbDataTypeConfigCollection;
 
 	render() {
 		return html`<div>umb-property-editor-ui-block-list</div>`;

src/packages/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts

@@ -3,7 +3,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components';
+import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-checkbox-list
@@ -19,8 +19,9 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem
 		this.#value = value ?? [];
 	}
 
-	@property({ type: Array, attribute: false })
-	public set config(config: UmbDataTypePropertyCollection) {
+	@property({ attribute: false })
+	public set config(config: UmbDataTypeConfigCollection | undefined) {
+		if (!config) return;
 		const listData: Record<number, { value: string; sortOrder: number }> | undefined = config.getValueByAlias('items');
 
 		if (!listData) return;

src/packages/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts

@@ -3,7 +3,7 @@ import { UUITextStyles, UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/ex
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
-import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components';
+import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-color-picker
@@ -21,10 +21,10 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 	@state()
 	private _swatches: UmbSwatchDetails[] = [];
 
-	@property({ type: Array, attribute: false })
-	public set config(config: UmbDataTypePropertyCollection) {
-		this._showLabels = config.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
-		this._swatches = config.getValueByAlias('items') ?? [];
+	@property({ attribute: false })
+	public set config(config: UmbDataTypeConfigCollection | undefined) {
+		this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
+		this._swatches = config?.getValueByAlias('items') ?? [];
 	}
 
 	private _onChange(event: UUIColorSwatchesEvent) {

src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts

@@ -3,7 +3,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex
 import { UUITextStyles, InputType } from '@umbraco-cms/backoffice/external/uui';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components';
+import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-date-picker
@@ -53,8 +53,9 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 
 	private _offsetTime?: boolean;
 
-	@property({ type: Array, attribute: false })
-	public set config(config: UmbDataTypePropertyCollection) {
+	@property({ attribute: false })
+	public set config(config: UmbDataTypeConfigCollection | undefined) {
+		if (!config) return;
 		const oldVal = this._inputType;
 
 		// Format string prevalue/config